Wyświetlacz twitter bootstrap btn-grupa inline z tekstem

Question

Problem

Chcę móc używać btn grupy na Twitterze bootstrap i posiada przyciski pokazują się na lewo od jakiegoś tekstu. Nie jestem pewien, czy jest to już dostępne na twitterze bootstrap lub czy muszę dodać jakieś css.

co mam

Obecnie mam btn-zdefiniowaną grupę z dwoma przyciskami. Następnie mam po przyciskach ciąg tekstu.

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

Co Próbowałem

Próbowałem kilka rzeczy tutaj. Zmodyfikowałem tag <p> na <div class="row"> z dwoma podziałowymi podziałami jednym dla przycisków i jednym dla tekstu, ale to nie zadziałało. Próbowałem również następujące:

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

i zdefiniowane w css .inline {display:inline-block; zoom:1; *display: inline;} Jednak to nie działało. To właśnie dostaję. Jak widać, tekst wyświetla się pod grupą przycisków. Chcę tekst po prawej stronie grupy przycisków.

Pytanie

Co mogę zrobić, aby dostać się do grupy przycisk, aby wyświetlić na prawo od napisu? Czy jest coś, co jest już wbudowane w twitter bootstrap, jeśli tak, to co? Jeśli nie, to czy jestem na dobrej drodze do stworzenia klasy inline, jeśli tak jest, dlaczego to nie zadziałało?

Aktualizacja

Dziękuję RichardTowers za sugestię na temat klasy rozwijanego lewo na grupy przycisków. Jednak przy dodawaniu kolejnych zestawów (co jest potrzebne) otrzymuję:

Zakładam, że dzieje się tak z powodu unoszenia się. Czy to jest poprawne i jak to naprawić?

Answer 1

Put pull-left na guziki div: http://jsfiddle.net/dbTqC/653/

myślę, że to po prostu ustawia float: left, więc trzeba wyczyścić rzeczy poniżej. Dla tego istnieje klasa clearfix.

Warto przejrzeć some CSS resources, aby zrozumieć, co się tutaj dzieje.

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

Zrobiłem jak zasugerowano w this SO answer, więc w zasadzie Zacząłem od .navbar .brand stylu i dostosowane trochę.
Jeżeli zainteresowany, tutaj jest mój zmieniony styl:

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

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

i efekt końcowy:

Answer 4

to działa:

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