Pantalla de arranque Twitter BTN-grupo en línea con el texto

Question

Problema

quiero ser capaz de utilizar BTN grupo para el arranque de twitter y tener los botones muestran a la izquierda de un texto. No estoy seguro si esto ya está disponible en Twitter bootstrap o si necesito agregar algo de CSS.

Lo que tengo

Actualmente tengo un grupo BTN definido con dos botones. Luego tengo después de los botones una cadena de texto.

<p> 
    <div class="btn-group" data-toggle="buttons-checkbox"> 
     <div class="btn btn-small">BTN Text 1</div> 
     <div class="btn btn-small">BTN Text 2</div> 
    </div> 
    String to display after buttons on same line 
</p> 

Lo que he tratado

He intentado algunas cosas aquí. Modifiqué la etiqueta <p> para que fuera <div class="row"> con dos divisiones de división uno para los botones y otra para el texto, pero esto no funcionó. También probé el siguiente:

<div> 
    <div class="btn-group inline" data-toggle="buttons-checkbox"> 
     <div class="btn btn-small">BTN Text 1</div> 
     <div class="btn btn-small">BTN Text 2</div> 
    </div> 
    <span class="inline">String to display after buttons on same line</span> 
</div> 

y definido en el css .inline {display:inline-block; zoom:1; *display: inline;} Sin embargo, esto tampoco funcionó. Esto es lo que estoy consiguiendo Como puede ver, el texto se muestra debajo del grupo de botones. Quiero el texto a la derecha del grupo de botones.

Pregunta

¿Qué puedo hacer para que el grupo de botones para mostrar a la derecha de la cadena? ¿Hay algo ya incorporado en Twitter bootstrap para esto? Si es así, ¿qué? Si no, ¿estaba en el camino correcto de crear una clase en línea, si este es el caso, por qué no funcionó?

actualización

Gracias RichardTowers por la sugerencia de la clase de pull-izquierda en el grupo de botones. Sin embargo, al agregar más conjuntos (lo cual es necesario) obtengo lo siguiente:

Supongo que esto se debe a la flotación. ¿Es correcto y cómo lo solucionaría?

Answer 1

Deja pull-left sobre los botones div: http://jsfiddle.net/dbTqC/653/

Creo que esto sólo establece float: left, por lo que tendrá que aclarar las cosas debajo de ella. Hay una clase clearfix para esto.

Vale la pena echarle un vistazo a some CSS resources para que entiendas lo que está sucediendo aquí.

Answer 2

<p class="btn-toolbar"> 
    <span class="btn-group"> 
    <a href="#" class="btn">Button 1</a> 
    </span> 
    <span class="btn-group"> 
    <a class="btn" href="#">Button 2</a> 
    <a class="btn" href="#">Button 3</a> 
    </span> 
    <span class="btn-group">Text here.</span> 
</p> 

Answer 3

lo hice como se sugiere en this SO answer, así que básicamente me Partido de .navbar .brand estilo y adaptado un poco.
Si está interesado, aquí es mi estilo cambió:

/* See .navbar .brand style in bootstrap.css for a reference */ 
.btn-toolbar .title { 
    display: block; 
    float: left; 
    margin-top: -4px; /* Recover part of margin set in child Header nodes */ 
    margin-left: 10px; 
    font-size: 20px; 
    font-weight: 200; 
    color: #777777; 
    text-shadow: 0 1px 0 #ffffff; 
} 

uso de HTML:

<div class="btn-toolbar"> 
    <div class="btn-group pull-left"> 
     <a class="btn" href="#/search">Search...</a> 
    </div> 
    <div class="title"> 
     <h4>View offers</h4> 
    </div> 
    <div class="btn-group pull-right"> 
     <a class="btn" href="#/batchDelete">Delete ...</a> 
     <a class="btn" href="#/new">New</a> 
    </div> 
</div> 

y resultado final:

Answer 4

Esto funciona:

<p>Hello <span class="btn-group">...</span></p>