Html 需要正确对齐引导窗体_Html_Css_Twitter Bootstrap

Html 需要正确对齐引导窗体

html css twitter-bootstrap

Html 需要正确对齐引导窗体,html,css,twitter-bootstrap,Html,Css,Twitter 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 ===
col label     col form field     | col label     col form field ===
===================================================================

2列表单布局工作正常，而在一列中，我无法对齐标签和表单字段，类似于2列表单布局。这是

HTML:


标签
标签
1.
2.
3.
标签
标签
标签
1.
2.
3.

可以吗

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


标签
标签
标签
标签
标签

好吗

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


标签
标签
标签
标签
标签

好吗

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


标签
标签
标签
标签
标签

好吗

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


标签
标签
标签
标签
标签

我想你需要这样

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


标签
标签
1.
2.
3.
标签
标签
标签
1.
2.
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>


标签
标签
1.
2.
3.
标签
标签
标签
1.
2.
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>


标签
标签
1.
2.
3.
标签
标签
标签
1.
2.
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>


标签
标签
1.
2.
3.
标签
标签
标签
1.
2.
3.

您应该使用“水平”形式来获得所需的结果。请找到下面的小提琴链接

小提琴：

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>


标签
标签
标签
标签
标签

您应该使用“水平”形式来获得所需的结果。请找到