bootstrap表單元素沒有正確對齊

Question

我想使用bootstrap對齊表單輸入元素，沒有太多的運氣。我曾嘗試使用左拉。有沒有辦法使用純引導程序來做到這一點，而不必添加crucible一次性的CSS？

<div class="modal-body"> 
    <form class="form-horizontal" role="form"> 
     <div class="row"> 
      <div class="form-group"> 
       <label class="control-label col-xs-2">Title:</label> 
       <div class="col-xs-10"> 
        <input type="text" class="form-control" data-bind="value: title" /> 
       </div> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="form-group"> 
       <label class="control-label col-xs-2">Start:</label> 
       <div class="input-group input-group-sm col-xs-3"> 
        <input type="text" placeholder="mm/dd/yy" data-provide="datepicker" data-bind="value:date" id="Date" /> 
        <span class="input-group-addon"><i class="fa fa-calendar"></i></span> 
       </div> 
      </div> 
     </div> 
    </form> 
</div> 

Answer 1

如前所述，你的結構沒有使用正確的組件，您不應該將列類與input-groups（docs）混合，也不應該在內使用rows 210級。看到Docs

使用自舉的預定義的網格類通過添加.FORM水平到 形式（其不必須是）對齊的標籤和的 表單控件組在水平佈局。這樣做會將 .form-groups更改爲表格行，因此不需要.row。

工作示例片段。

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> 
 
<!-- Modal --> 
 
<div id="myModal" class="modal fade" role="dialog"> 
 
    <div class="modal-dialog"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
     <h4>Some Form</h4> 
 

 
     </div> 
 
     <div class="modal-body"> 
 
     <form class="form-horizontal"> 
 
      <div class="form-group"> 
 
      <label class="control-label col-xs-3">Title:</label> 
 
      <div class="col-xs-9"> 
 
       <input type="text" class="form-control" data-bind="value: title" /> 
 
      </div> 
 
      </div> 
 
      <div class="form-group"> 
 
      <label class="control-label col-xs-3">Start:</label> 
 
      <div class="col-xs-9"> 
 
       <div class="input-group"> 
 
       <input type="text" class="form-control" placeholder="mm/dd/yy" data-provide="datepicker" data-bind="value:date" id="Date" /> <span class="input-group-addon"><i class="fa fa-calendar"></i></span> 
 

 
       </div> 
 
      </div> 
 
      </div> 
 
     </form> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

首先你在你的第二個表單組缺少class="form-control"。

其次，您將列與輸入組混合在一起，這不是引導方式。

請勿將輸入組與其他組件混合使用。 （請參閱：http://getbootstrap.com/components/#input-groups）

不要將表單組或網格列類直接與輸入 組混合。相反，窩輸入組的形式組或 電網相關元素的內部「

正確的HTML結構：

<div class="modal-body"> 
    <form class="form-horizontal" role="form"> 
     <div class="row"> 
      <div class="form-group"> 
       <label class="control-label col-xs-2">Title:</label> 
       <div class="col-xs-10"> 
        <input type="text" class="form-control" data-bind="value: title" /> 
       </div> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="form-group"> 
       <label class="control-label col-xs-2">Start:</label> 
       <div class="col-xs-4"> 
        <div class="input-group"> 
         <input type="text" class="form-control" data-bind="value: title" /> 
         <span class="input-group-addon"><i class="fa fa-calendar"></i></span> 
       </div> 
       </div> 
      </div> 
     </div> 
    </form> 
</div> 

固定演示CODEPEN