ブートストラップ列内のスクロールxオーバーフローでインラインでブートストラップラベルを作成する方法

Question

ここにコードhttps://jsfiddle.net/bnb34kzm/があります。

<div class="row"> 
    <div class="col-xs-6"> 
    <div class="input-group"> 
     <div type="text" class="form-control"> 
     <span class="label label-default">Default</span> 
     <span class="label label-primary">Primary</span> 
     <span class="label label-success">Success</span> 
     <span class="label label-info">Info</span> 
     <span class="label label-warning">Warning</span> 
     <span class="label label-danger">Danger</span> 
     </div> 
     <div class="input-group-btn"> 
     <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button> 
     <ul class="dropdown-menu dropdown-menu-right"> 
      <li><a href="#">Action</a></li> 
     </ul> 
     </div> 
     <!-- /btn-group --> 
    </div> 
    <!-- /input-group --> 
    </div> 
    <div class="col-xs-6">.col-xs-6</div> 
</div> 

私は、「ホワイトスペース」、「表示：インライン」しようとしたなどの、しかし、私は、インラインラベルを作成後、一般的に、彼らは、ブートストラップ、列のdivをオーバーフロー。 div.form-controlとdiv.input-group-btnを含む1行のままにしておくと、div.input-groupの幅を制限する方法が見つかりませんでした。

Answer 1

HTMLのinput-groupクラスにこのコード行を追加します。

<div type="text" class="form-control" style="display: inline-block;overflow: auto;">