Bootstrap btn-group mis-aligned

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

Может быть, лучше, если вы определите white-space: nowrap to .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 в эти дни.