ブートストラップボタングループは常に水平に整列します

Question

ブートストラップボタングループは常に1行になり、常に水平に整列します。 ウィンドウのサイズを変更すると、縦に下に表示されます。

私はボタンが常に1つの行に表示されるソリューションを探しています。

style="white-space:nowrap;"を親divに適用しましたが、動作しません。

可能であれば、ブートストラップの組み込みCSSクラスのみを使用してみてください。 現在のHTML構造をそのまま維持して回答してください。それはそれが鉱山プロジェクトでどのように実装されているかによるものです。

これは、ブートストラップボタングループの最も単純な実装です。あなたはfloat: left;を上書きするだけでなく、親にwhite-space: nowrap;を追加する必要がPLUNKER

CODE

<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

を参照してください。だからあなたのCSSの：

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

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

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

私はちょうど追加するのではなく、ブートストラップスタイリングを上書きするのでBTN-グループ/ BTN-プライマリー/ BTN-成功に特定のクラスを追加することをお勧めします、が、カスタムクラスは悪い習慣です。例えば

：

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

てみ表示：インラインフレックス親の代わりにディスプレイ上：インラインブロックに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>