Bootstrap V3

Question

我有一个Bootstrap V3中的表格。设计人员希望某些行包含两个输入，而其他行只包含一个。

我在这里做了一个小提琴。 https://jsfiddle.net/06qk4wh4/

<div class="form-group  col-sm-12">
    <label class="control-label col-sm-2">
        Label 1
    </label>
    <div class="col-sm-10">
        <input type="text" class="form-control col-sm-12" />
    </div>
</div>
<div class="form-group col-sm-12 col-md-6">
    <label class="control-label col-sm-2 col-md-4">
        Label 2
    </label>
    <div class="col-sm-10 col-md-8">
      <input type="text" class="form-control col-sm-12" />
    </div>
</div>
<div class="form-group col-sm-12 col-md-6">
    <label class="control-label col-sm-2 col-md-4">
        Label 3
    </label>
    <div class="col-sm-10 col-md-8">
      <input type="text" class="form-control col-sm-12" />
    </div>
</div>
<div class="form-group col-md-12">
    <label class="control-label col-sm-2">
        Label 4
    </label>
    <div class="col-sm-10">
        <input type="text" class="form-control col-sm-12" />
    </div>
</div>

问题是在有两个输入的行中我得到一个对齐错误（在下图中以红色显示）。它在col-sm-x中效果很好，因为它使用了全宽。但在col-md-x中，我尝试在一行中渲染两个输入，由于计算百分比，我得到“对齐错误”。

有一个简单的解决方案吗？这一定是一个非常常见的问题？

Answer 1

您可以尝试使用此代码。 它似乎解决了你的问题。我只是在div（col-sm-12）之后添加一行

<div class="form-group  col-sm-12">
    <div class="row">
        <label class="control-label col-sm-2">
            Label 1
        </label>
        <div class="col-sm-10">
            <input type="text" class="form-control" />
        </div>
    </div>
</div>
<div class="form-group col-sm-12 col-md-6">
    <div class="row">
        <label class="control-label col-sm-2 col-md-4">
            Label 2
        </label>
        <div class="col-sm-10 col-md-8">
            <input type="text" class="form-control" />
        </div>
    </div>

</div>
<div class="form-group col-sm-12 col-md-6">
    <div class="row">
        <label class="control-label col-sm-2 col-md-4">
            Label 3
        </label>
        <div class="col-sm-10 col-md-8">
            <input type="text" class="form-control" />
        </div>
    </div>
</div>
<div class="form-group col-md-12">
    <div class="row">
        <label class="control-label col-sm-2">
            Label 4
        </label>
        <div class="col-sm-10">
            <input type="text" class="form-control" />
        </div>
    </div>
</div>

希望这是解决方案：）

里奇