display Twitter bootstrap btn-gruppo linea con il testo

Question

Problema

voglio essere in grado di utilizzare BTN gruppo a Twitter bootstrap e hanno i pulsanti mostrano a sinistra del testo. Non sono sicuro se questo è già disponibile in twitter bootstrap o se devo aggiungere qualche css.

Cosa I Have

Al momento ho un btn-gruppo definito con due pulsanti. Ho quindi dopo i pulsanti una stringa di testo.

<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> 

Quello che ho cercato

ho provato un paio di cose qui. Ho modificato il tag <p> come uno <div class="row"> con due intervalli di espansione uno per i pulsanti e uno per il testo, ma questo non ha funzionato. Ho anche provato il seguente:

<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> 

e definito nel css .inline {display:inline-block; zoom:1; *display: inline;} Tuttavia questo non ha funzionato neanche. Questo è quello che sto ottenendo. Come puoi vedere il testo viene visualizzato sotto il gruppo di pulsanti. Voglio il testo alla destra del gruppo di pulsanti.

Domanda

Che cosa posso fare per ottenere il gruppo di pulsanti per visualizzare alla destra della stringa? C'è qualcosa già incorporato nel bootstrap di Twitter per questo, se sì cosa? In caso contrario, ero sulla buona strada per creare una classe in linea, se questo è il caso, perché non ha funzionato?

Aggiornamento

Grazie RichardTowers per il suggerimento sulla classe di pull-sinistra sul gruppo di pulsanti. Tuttavia quando aggiungo altri set (che è necessario) ottengo il seguente:

Suppongo che questo sia dovuto al fatto di fluttuare. È corretto e come lo risolverei?

Answer 1

Mettere pull-left sui pulsanti div: http://jsfiddle.net/dbTqC/653/

Credo che questa imposta solo float: left, quindi è necessario per chiarire le cose di sotto di essa. C'è una classe clearfix per questo.

Vale la pena dare un'occhiata allo some CSS resources in modo da capire cosa sta succedendo qui.

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

ho fatto come suggerito in this SO answer, in modo sostanzialmente Ho iniziato di .navbar .brand stile e adattato un po '.
Se interessati, qui è il mio stile cambiato:

/* 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; 
} 

utilizzo 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> 

e risultato finale:

Answer 4

Questo funziona:

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