html - Bootstrap V3 中每行的交替输入数

Question

我有一个用 Bootstrap V3 制作的表格。设计者希望某些行包含两个输入，而其他行仅包含一个。

我在这里做了一个 fiddle 。 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>

希望这是解决方案:)

里奇