需要對齊引導形式正確

Question

我有一個引導的形式是這樣的：

=================================================================== 
col label  col form field ====================================== 
=================================================================== 
col label  col form field  | col label  col form field === 
col label  col form field  | col label  col form field === 
=================================================================== 

2列的形式佈局，做工精細，而在一列我不能對齊的標籤和形式類似於2列表格式的字段。這裏是demo

HTML：

<div> 
    <div class="col-lg-10 col-md-10 col-sm-10 col-xs-10 col-md-push-2"> 
     <div class="form-group"> 
      <label class="col-xs-12 col-sm-6 col-md-2 col-lg-2 control-label text-right col-sm-pull-2">Label</label> 
      <div class="col-xs-12 col-sm-6 col-md-8 col-lg-8"> 
       <input type="text" class="form-control" /> 
      </div> 
     </div> 
    </div> 
    <div class="clear12"></div> 
    <!-- first col --> 
    <div class="col-lg-6 col-md-6 col-sm-10 col-xs-10 marginauto"> 
     <div class="clear"></div> 
     <div class="form-group"> 
      <label class="col-xs-12 col-sm-6 col-md-5 col-lg-5 control-label text-right">Label</label> 
      <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6"> 
       <select class="form-control"> 
        <option value="1" selected>1</option> 
        <option value="2">2</option> 
        <option value="3">3</option> 
       </select> 
      </div> 
     </div> 
     <div class="form-group"> 
      <label class="col-xs-12 col-sm-6 col-md-5 col-lg-5 control-label text-right">Label</label> 
      <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6"> 
       <input type="text" class="form-control" /> 
      </div> 
     </div> 
    </div> 
    <!--/first col --> 
    <!-- second col --> 
    <div class="col-lg-6 col-md-6 col-sm-10 col-xs-10 marginauto"> 
     <div class="hidden_767"></div> 
     <div class="form-group"> 
      <label for="dateFrom" class="col-xs-12 col-sm-6 col-md-5 col-lg-5 control-label text-right">Label</label> 
      <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6"> 
       <div class="input-group"> 
        <input type="text" class="date-picker form-control" /> 
        <div class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="form-group"> 
      <label for="searchCategory" class="col-xs-12 col-sm-6 col-md-5 col-lg-5 control-label text-right">Label</label> 
      <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6"> 
       <select class="form-control"> 
        <option value="1" selected>1</option> 
        <option value="2">2</option> 
        <option value="3">3</option> 
       </select> 
      </div> 
     </div> 
    </div> 
    <!--/second col --> 
</div> 

Answer 1

您應該使用橫向窗體來實現所需的結果。請看下面鏈接，小提琴

小提琴：https://jsfiddle.net/nileshmahaja/4cbzY/617/

HTML

<div class="form-horizontal"> 

    <div class="form-group"> 
    <div class="col-md-3 col-sm-3"> 
     <label class="control-label">Label</label> 
    </div> 
    <div class="col-md-9 col-sm-9"> 
     <input type="text" class="form-control"> 
    </div> 
    </div> 

    <div class="form-group"> 
    <div class="col-md-3 col-sm-3"> 
     <label class="control-label">Label</label> 
    </div> 
    <div class="col-md-3 col-sm-3"> 
     <input type="text" class="form-control"> 
    </div> 
    <div class="col-md-3 col-sm-3"> 
     <label class="control-label">Label</label> 
    </div> 
    <div class="col-md-3 col-sm-3"> 
     <input type="text" class="form-control"> 
    </div> 
    </div> 

    <div class="form-group"> 
    <div class="col-md-3 col-sm-3"> 
     <label class="control-label">Label</label> 
    </div> 
    <div class="col-md-3 col-sm-3"> 
     <input type="text" class="form-control"> 
    </div> 
    <div class="col-md-3 col-sm-3"> 
     <label class="control-label">Label</label> 
    </div> 
    <div class="col-md-3 col-sm-3"> 
     <input type="text" class="form-control"> 
    </div> 
    </div> 

    <!--/second col --> 
</div> 

Answer 2

是不是很好..

<div class="form-inline"> 
      <div class="col-md-12"> 
      <label class="control-label text-right ">Label</label> 
      <input type="text" class="form-control" /> 
     </div> 
    </div> 

    <div class="form-inline"> 
      <div class="col-xs-6 col-md-4 spaces"> 
      <label class="control-label text-right ">Label</label> 
      <input type="text" class="form-control" /> 
     </div> 
    </div> 
    <div class="form-inline"> 
     <div class="col-xs-6 col-md-6 spaces"> 
      <label class="control-label text-right ">Label</label> 
      <input type="text" class="form-control" /> 
     </div> 
    </div> 
    <div class="form-inline"> 
      <div class="col-xs-6 col-md-4 spaces"> 
      <label class="control-label text-right ">Label</label> 
      <input type="text" class="form-control" /> 
     </div> 
    </div> 
    <div class="form-inline"> 
     <div class="col-xs-6 col-md-6 spaces"> 
      <label class="control-label text-right ">Label</label> 
      <input type="text" class="form-control" /> 
     </div> 
    </div> 

DEMO

Answer 3

我認爲你需要這樣的

<div> 
    <div class="col-lg-10 col-md-10 col-sm-10 col-xs-10 col-md-push-2"> 
     <div class="form-group"> 
      <label class="col-xs-12 col-sm-6 col-md-2 col-lg-2 control-label text-right col-sm-pull-2">Label</label> 
      <div class="col-xs-12 col-sm-6 col-md-8 col-lg-8"> 
       <input type="text" class="form-control" /> 
      </div> 
     </div> 
    </div> 
    <div class="clear12"></div> 
    <!-- first col --> 
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 marginauto"> 
     <div class="clear"></div> 
     <div class="form-group"> 
      <label class="col-xs-12 col-sm-6 col-md-5 col-lg-5 control-label text-right">Label</label> 
      <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6"> 
       <select class="form-control"> 
        <option value="1" selected>1</option> 
        <option value="2">2</option> 
        <option value="3">3</option> 
       </select> 
      </div> 
     </div> 
     <div class="form-group"> 
      <label class="col-xs-12 col-sm-6 col-md-5 col-lg-5 control-label text-right">Label</label> 
      <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6"> 
       <input type="text" class="form-control" /> 
      </div> 
     </div> 
    </div> 
    <!--/first col --> 
    <!-- second col --> 
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 marginauto"> 
     <div class="hidden_767"></div> 
     <div class="form-group"> 
      <label for="dateFrom" class="col-xs-12 col-sm-6 col-md-5 col-lg-5 control-label text-right">Label</label> 
      <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6"> 
       <div class="input-group"> 
        <input type="text" class="date-picker form-control" /> 
        <div class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="form-group"> 
      <label for="searchCategory" class="col-xs-12 col-sm-6 col-md-5 col-lg-5 control-label text-right">Label</label> 
      <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6"> 
       <select class="form-control"> 
        <option value="1" selected>1</option> 
        <option value="2">2</option> 
        <option value="3">3</option> 
       </select> 
      </div> 
     </div> 
    </div> 
    <!--/second col --> 
</div>