結合輸入組和形式，集團在引導3臥式成形

我做了一個用的jsfiddle 3個輸入元素：http://jsfiddle.net/zb4dc/1/結合輸入組和形式，集團在引導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

如果需要按鈕而不是插件：使用input-group-btn代替input-group-addon：http://getbootstrap.com/components/#input-groups-buttons – Snook

結合輸入組和形式，集團在引導3臥式成形

回答

相關問題