ブートストラップ入力グループの動的幅

Question

ブートストラップ入力グループ入力エレメントの幅を動的にするにはどうしたらいいですか？私は幅を設定しようとしました：自動;入力グループはまだ設定された幅を持っているようです。

<form class="col-sm-12 form-horizontal"> 
<div class="col-sm-6"> 
    <ul class="form-group list-inline list-unstyled"> 
    <li class="" ng-repeat="item in items"> 
     <div class="input-group list-item"> 
     <input type="text" readonly="" class="form-control" value="{{item}}" /> 
     <div class="input-group-btn"> 
      <button type="button" class="btn btn-default" ng-click="removeExpedition(item)"> 
      <span class="glyphicon glyphicon-remove"></span> 
      </button> 
     </div> 
     </div> 
    </li> 
    </ul> 
</div> 
</form> 

とCSS：ここ

.list-item>.input-group-btn { 
    width: auto; 
} 

は実証するplunkerです。入力とボタンの間のすべての空白を参照してください。私はセットのパディングと、入力要素のすぐ隣にボタンを持っていると思います。

Answer 1

これを試してみてください：

.list-inline > li, .input-group { 
    width: 100%; 
} 

Answer 2

これを行うには、ブートストラップでクラスにそこに構築されています。 だけでボタンクラスを与える（btn-block）

Answer 3

はLI要素のスタイルdisplay: blockに追加し、すべての

Answer 4

大丈夫だクラスbtn-blockグループdiv.inputに追加しますので、私はBTN-グループを使用することにより、これを行うことができました入力グループの代わりに入力は値を表示するためだけに使用されていたので、必要ではありませんでした。デフォルトでは、btn-groupはそれに含まれるテキストとして幅が広いだけです。