顯示Twitter的引導與文本BTN-組內嵌

我希望能夠BTN組使用Twitter的引導，並有按鈕顯示一些文本的左側。不知道這是否已經可以在twitter引導或如果我需要添加一些CSS。

我有什麼

我現在有兩個按鈕定義的BTN-組。然後我在按鈕之後有一串文本。

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

我已經試過

我在這裏嘗試了幾件事情。我將<p>標記修改爲<div class="row">，其中兩個跨度div用於按鈕，另一個用於文本，但這不起作用。我也嘗試了以下內容：

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

並在css中定義.inline {display:inline-block; zoom:1; *display: inline;}但是這也不起作用。這就是我所得到的。正如你所看到的，文本顯示在按鈕組下方。我希望文本位於按鈕組的右側。

What the above is giving me

問題

我能做些什麼，以獲得按鈕組，以顯示字符串的吧？有什麼已經建立到twitter引導爲此，如果是的話？如果沒有，我是否正在創建一個內聯類的正確軌道，如果是這樣的話，爲什麼它不工作？

更新

謝謝RichardTowers的按鈕組上拉左級的建議。然而，當添加更多的套（這是需要）我得到以下幾點： With pull-left class added to btn-group

我認爲，這是因爲浮動的。這是正確的，我將如何解決它？

來源

2012-06-29 bretterer

把pull-left上的按鈕DIV：http://jsfiddle.net/dbTqC/653/

我認爲這只是設置float: left，所以你需要清除它下面的東西。這裏有一個clearfix班。

這是值得看看some CSS resources，以便你瞭解這裏發生了什麼。

來源

2012-06-29 16:10:08 RichardTowers

這很接近，但我需要最終添加更多的按鈕組。我更新了jsfiddle以顯示以及我的帖子http://jsfiddle.net/dbTqC/2/ – bretterer

的結果是的，只是看到更新的jsfiddle。 – RichardTowers

謝謝......在每組之間添加clearfix div有所幫助。我已經添加了jsfiddle僅供參考http://jsfiddle.net/dbTqC/7/ – bretterer

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

來源

2012-11-20 20:30:49 Mark

Regular Bootstrap工具欄由用於工具欄/組的'div'和用於按鈕的'a' /'btn'組成。不是'p'和'span' – superjos

我一樣在this SO answer建議，所以基本上我開始的.navbar .brand風格和適應一點點。
如果有興趣，這是我改變風格：

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

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>

和最終的結果：

Title in toolbar

來源

2013-03-07 11:40:08 superjos

這工作：

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

來源

2013-04-11 15:03:51

顯示Twitter的引導與文本BTN-組內嵌

回答

相關問題