ブートストラップ3水平型

で入力グループとフォーム・グループを組み合わせた私は、3つの入力要素とjsfiddleを作りました。これはどのように行うことができますか？ブートストラップ3水平型

<form class="form-horizontal" role="form"> 
    <div class="form-group"> 
    <label for="inputfield1" class="col-sm-2 control-label">Input 1</label> 
    <div class="col-sm-10"> 
     <input type="text" class="form-control" id="inputfield1" placeholder="Input 1"> 
    </div> 
    </div> 
    <div class="form-group"> 
    <label for="inputfield2" class="col-sm-2 control-label">Input 2</label> 
    <div class="controls"> 
     <div class="input-group"> 
     <input type="text" class="form-control" id="inputfield2" placeholder="Input 2"> 
     <span class="input-group-addon">.00</span> 
     </div> 
    </div> 
    </div> 
    <div class="form-group"> 
    <label for="inputfield3" class="col-sm-2 control-label">Input 3</label> 
    <div class="col-sm-10"> 
     <input type="text" class="form-control" id="inputfield3" placeholder="Input  3"> 
    </div> 
</form>

出典

2014-01-16 Thuurke

あなただけの第二の入力欄にcol-sm-10を忘れてしまいました。ここにあなたの修正コードは次のとおりです。

<body> 
    <div class="container"> 
     <form class="form-horizontal" role="form"> 
      <div class="form-group"> 
       <label for="inputfield1" class="col-sm-2 control-label">Input 1</label> 
       <div class="col-sm-10"> 
        <input type="text" class="form-control" id="inputfield1" placeholder="Input 1"> 
       </div> 
      </div> 
      <div class="form-group"> 
       <label for="inputfield2" class="col-sm-2 control-label">Input 2</label> 
       <div class="col-sm-10 controls"> 
        <div class="input-group"> 
         <input type="text" class="form-control" id="inputfield2" placeholder="Input 2"> 
         <span class="input-group-addon">.00</span> 
        </div> 
       </div> 
      </div> 
      <div class="form-group"> 
       <label for="inputfield3" class="col-sm-2 control-label">Input 3</label> 
       <div class="col-sm-10"> 
        <input type="text" class="form-control" id="inputfield3" placeholder="Input 3"> 
       </div> 
      </div> 
     </form> 
    </div> 
</body>

フィドル：http://jsfiddle.net/zb4dc/2/

出典

2014-01-16 19:51:01 Ranveer

....時々....それは:)おかげでとても簡単です！ – Thuurke

私は知っています！本当にあなたを悩まし、肉眼ではほとんど見えません！本当にイライラする！ – Ranveer

addonの代わりにボタンが必要な場合：input-group-addonの代わりにinput-group-btnを使用してください：http://getbootstrap.com/components/#input-groups-buttons – Snook

ブートストラップ3水平型

答えて

関連する問題