Display twitter bootstrap btn nhóm inline với văn bản

Question

Vấn đề

Tôi muốn để có thể sử dụng btn nhóm cho twitter bootstrap và có các nút hiển thị ở phía bên trái của một số văn bản. Không chắc chắn nếu điều này đã có sẵn trong twitter bootstrap hoặc nếu tôi cần phải thêm một số css.

Những gì tôi có

Tôi hiện đang có một btn nhóm định nghĩa với hai nút. Sau đó tôi có sau khi các nút một chuỗi văn bản.

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

Những gì tôi đã cố gắng

Tôi đã thử một vài điều ở đây. Tôi đã sửa đổi thẻ <p> thành <div class="row"> với hai khoảng cách div một cho các nút và một cho văn bản nhưng điều này không hoạt động. Tôi cũng đã thử các cách sau:

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

và được xác định trong css .inline {display:inline-block; zoom:1; *display: inline;} Tuy nhiên điều này cũng không có tác dụng. Đây là những gì tôi đang nhận được. Như bạn có thể thấy văn bản hiển thị bên dưới nhóm nút. Tôi muốn văn bản ở bên phải của nhóm nút.

Câu hỏi

Tôi có thể làm gì để có được những nhóm nút để hiển thị ở bên phải của chuỗi? Có cái gì đó đã được xây dựng vào twitter bootstrap cho điều này, nếu như vậy những gì? Nếu không, tôi đã đi đúng hướng để tạo ra một lớp nội tuyến, nếu đây là trường hợp, tại sao nó không hoạt động?

Cập nhật

Cảm ơn bạn RichardTowers cho đề nghị trên lớp kéo trái trên nhóm nút. Tuy nhiên, khi thêm các bộ khác (cần thiết), tôi nhận được các thông tin sau:

Tôi cho rằng điều này là do nổi. Điều này có đúng không và tôi sẽ sửa nó như thế nào?

Answer 1

Đặt pull-left vào các nút div: http://jsfiddle.net/dbTqC/653/

Tôi nghĩ rằng đây chỉ là bộ float: left, vì vậy bạn sẽ cần phải xóa mọi thứ dưới nó. Có một lớp học clearfix cho việc này.

Điều đáng xem là some CSS resources để bạn hiểu điều gì đang xảy ra ở đây.

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

tôi đã làm như đề xuất trong this SO answer, vì vậy về cơ bản tôi bắt đầu tắt của .navbar .brand phong cách và thích nghi một chút.
Nếu quan tâm, đây là phong cách thay đổi của tôi:

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

sử dụng 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> 

và kết quả cuối cùng:

Answer 4

này hoạt động:

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