bootstrap btn組錯誤對齊

Question

我遇到以下代碼的問題;

<li class="span4"> 
     <div class="thumbnail"> 
      <img src="" alt="" /> 
      <div class="caption"> 
       <h3>Title</h3> 
       <div class="clearfix"> 
        <div class="pull-right"> 
         <div class="btn-group"> 
          <button class="btn btn-success"><i class="icon-thumbs-up"></i></button> 
          <button class="btn btn-danger"><i class="icon-thumbs-down"></i></button> 
          <button class="btn btn-warning"><i class="icon-star-empty"></i></button> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </li> 

縮略圖描述中的按鈕看起來像這樣;

我遇到的主要問題是，這些只出現破有時。不總是。

在JSFiddle中可以正常工作，但無論如何， http://jsfiddle.net/NsKYH/1/

Answer 1

如果您定義空白：nowrap到.btn-group DIV可能會更好。像這樣寫：

.btn-group{ 
    white-space:nowrap; 
}  
button{ 
white-space:normal; 
} 

Answer 2

我發現一些瀏覽器和自定義CSS有button標籤之間的空白問題。嘗試：

<div class="btn-group"><button 
    class="btn btn-success"><i class="icon-thumbs-up"></i></button><button 
    class="btn btn-danger"><i class="icon-thumbs-down"></i></button><button 
    class="btn btn-warning"><i class="icon-star-empty"></i></button></div> 

或迫使風格的CSS（好主意）或內嵌 （不是一個好主意）：

<div class="btn-group" style="white-space:nowrap;"> ... 

你還會發現這個問題與input-append（等）分組。刪除html標籤之間的空間似乎解決了這個問題。

Answer 3

簡單的解決辦法，以防止按鈕組的包裹來自brianmhunt：

.btn-group { 
    display: flex; 
} 

Flexbox的是pretty well supported這些天。