ブートストラップ - 完全な幅のレイアウト

Question

私はブートストラップを使用するアプリを持っています。このアプリでは、私は並べ替えることができる項目のリストを持っています。現在、私のリストは以下のようになります。私は、各項目は、空間全体の幅全体を埋めるように、このリストを作成しようとしている

<div class="col-xs-12"> 
<ul id="choices" class="list-unstyled"> 
    <li> 
    <i class="fa fa-reorder"></i> 
    <div class="form-group"> 
     <input type="text" class="form-control col-md-8"> 
    </div> 
    <i class="fa fa-times-circle"></i> 
    </li> 

    <li> 
    <i class="fa fa-reorder"></i> 
    <div class="form-group"> 
     <input type="text" class="form-control col-md-8"> 
    </div> 
    <i class="fa fa-times-circle"></i> 
    </li> 

    <li> 
    <i class="fa fa-reorder"></i> 
    <div class="form-group"> 
     <input type="text" class="form-control col-md-8"> 
    </div> 
    <i class="fa fa-times-circle"></i> 
    </li> 
</ul> 
</div> 

。言い換えれば、私はこのようなルックスにそれをしたい：私はこれを行う際に瞬間

のdiv

+---------------------------------------------------------------------------+ 
|                   | 
| = _____________________________________________________________________ x | 
| = _____________________________________________________________________ x | 
| = _____________________________________________________________________ x | 
|                   | 
+---------------------------------------------------------------------------+ 

、私は別の行にinputフィールドを取得し、私はそれぞれのリストを取得することはできません利用可能なスペースを埋めるための項目。私は何が欠けていますか？

Answer 1

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/> 
 

 
<div class="col-xs-12"> 
 
<ul id="choices" class="list-unstyled"> 
 
    <li> 
 
    <div class="input-group margin-bottom-sm"> 
 
     <span class="input-group-addon"><i class="fa fa-reorder fa-fw"></i></span> 
 
     <input type="text" class="form-control col-md-8"> 
 
     <span class="input-group-addon"><i class="fa fa-times-circle fa-fw"></i></span> 
 
    </div> 
 
    </li> 
 

 
    <li> 
 
    <div class="input-group margin-bottom-sm"> 
 
     <span class="input-group-addon"><i class="fa fa-reorder fa-fw"></i></span> 
 
     <input type="text" class="form-control col-md-8"> 
 
     <span class="input-group-addon"><i class="fa fa-times-circle fa-fw"></i></span> 
 
    </div> 
 
    </li> 
 

 
    <li> 
 
    <div class="input-group margin-bottom-sm"> 
 
     <span class="input-group-addon"><i class="fa fa-reorder fa-fw"></i></span> 
 
     <input type="text" class="form-control col-md-8"> 
 
     <span class="input-group-addon"><i class="fa fa-times-circle fa-fw"></i></span> 
 
    </div> 
 
    </li> 
 
</ul> 
 
</div>

あなたはそれぞれの側にアイコンを追加することができますブートストラップで入力

take a looこの時、K：

bootstrap input addons

は、あなたがあなたの上で明示的なwidthでfloatを使用してこれを達成することができ、フォント素晴らしいアイコン（3例をブートストラップするために行く）

font awesome examples

Answer 2

てみスタイルでbootrstrapインラインフォーム

<li class="form-inline">  
    <div class="form-group"> 
    <i class="fa fa-reorder"></i> 
    <input type="text" class="form-control col-md-8"> 
    <i class="fa fa-times-circle"></i> 
    </div> 
</li> 

Answer 3

試しCOL-XS-12とwidth属性を使用する

Answer 4

と例えば以下を参照してください。アイコンを入力し、overflow:hiddenを入力に追加します。codepen

HTML

<ul id="choices" class="list-unstyled"> 
    <li> 
    <i class="fa fa-reorder left"></i> 
    <i class="fa fa-times-circle right"></i> 
    <div class="middle"><input type="text" class="form-control"></div> 
    </li> 
</ul> 

CSS

.left { 
    width: 50px; 
    float: left; 
} 

.right { 
    width: 50px; 
    float: right; 
} 

.middle { 
    overflow: hidden; 
}