html - 需要正确对齐 Bootstrap 表单

Question

我有一个像这样的 Bootstrap 表单:

===================================================================
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

您应该使用水平形式来达到预期的效果。请在下面找到 fiddle 的链接

fiddle : 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>