Группа кнопок Bootstrap всегда выравнивается горизонтально

Question

Группа кнопок Bootstrap делает их всегда в одной строке, всегда выравнивая по горизонтали. Когда я изменяю размер кнопки окна, она падает вертикально.

Я ищу решение, в котором кнопка всегда входит в одну строку независимо от того, что.

Я применил style="white-space:nowrap;" к родительскому div, но он не работает.

Если возможно, попробуйте использовать только встроенные классы CSS-бутстрапа. Пожалуйста, ответьте, сохранив существующую структуру HTML так, как она есть. Потому что так оно реализуется в шахтном проекте.

Это простейшая реализация группы кнопок начальной загрузки. См PLUNKER

КОД

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="well form-horizontal"> 
 
    <div class="form-group" style="white-space:nowrap;"> 
 
     <div> 
 
     <div class="btn-group"> 
 
      <button type="button" class="btn btn-primary"> 
 
      11111 
 
      </button> 
 
      <button type="button" class="btn btn-success"> 
 
      22222 
 
      </button> 
 
      <button type="button" class="btn btn-primary"> 
 
      33333 
 
      </button> 
 
      <button type="button" class="btn btn-success"> 
 
      44444 
 
      </button> 
 
      <button type="button" class="btn btn-primary"> 
 
      55555 
 
      </button> 
 
      <button type="button" class="btn btn-success"> 
 
      22222 
 
      </button> 
 
      <button type="button" class="btn btn-primary"> 
 
      33333 
 
      </button> 
 
      <button type="button" class="btn btn-success"> 
 
      44444 
 
      </button> 
 
      <button type="button" class="btn btn-primary"> 
 
      55555 
 
      </button> 
 
      <button type="button" class="btn btn-success"> 
 
      44444 
 
      </button> 
 
      <button type="button" class="btn btn-primary"> 
 
      55555 
 
      </button> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div>

Answer 1

Вы должны переопределить float: left;, а также добавить white-space: nowrap; к родителю. Так что в вашем CSS:

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

.btn.btn-primary, 
.btn.btn-success { 
    float: none; 
} 

plunker: https://plnkr.co/edit/lRWyHeeN78d2sSNaXGSZ?p=preview

Хотя, я бы рекомендовал добавить определенный класс к БТН-группа/БТН-первичный/БТН-успеху, потому что переопределение бутстрэпов стиля, а не просто добавление Пользовательский класс - плохая практика.

Например:

HTML:

<div class="btn-group custom-class"> 
<button type="button" class="btn btn-primary custom-class"> 
<button type="button" class="btn btn-success custom-class"> 

CSS:

.btn-group.custom-class{...} 
.btn.btn-primary.custom-class, 
.btn.btn-success.custom-class {...} 

https://plnkr.co/edit/nAZD6Hssgnep37fXU9vb?p=preview

Answer 2

Try дисплей: встроенный-флекс на родителя, а не на дисплее: встроенный блок на btn-group

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
<div class="well form-horizontal" style=""> 
    <div class="form-group" style="white-space:nowrap;"> 
     <div> 
     <div class="btn-group" style="display:inline-flex;"> 
      <button type="button" class="btn btn-primary"> 
      11111 
      </button> 
      <button type="button" class="btn btn-success"> 
      22222 
      </button> 
      <button type="button" class="btn btn-primary"> 
      33333 
      </button> 
      <button type="button" class="btn btn-success"> 
      44444 
      </button> 
      <button type="button" class="btn btn-primary"> 
      55555 
      </button> 
      <button type="button" class="btn btn-success"> 
      22222 
      </button> 
      <button type="button" class="btn btn-primary"> 
      33333 
      </button> 
      <button type="button" class="btn btn-success"> 
      44444 
      </button> 
      <button type="button" class="btn btn-primary"> 
      55555 
      </button> 
      <button type="button" class="btn btn-success"> 
      44444 
      </button> 
      <button type="button" class="btn btn-primary"> 
      55555 
      </button> 
     </div> 
     </div> 
    </div> 
    </div>