如何修复此Bootstrap布局问题？

Question

我有一个使用Bootstrap 3的表单。我的布局应遵循以下内容：

1. 在小屏幕上，每行显示1个输入，标签位于输入
上方
2. 在中型设备上，每行显示2个输入，每个输入左侧都有标签
3. 在大型设备上，每个显示3个输入，每个输入左侧都有标签
4. 包含textarea的行应始终显示每行一个输入

我几乎和一个小怪癖一起工作了。在所有引导断点上排列如下所有元素的所有元素都能很好地运行到lg，如下所示：



然而，当我点击<form class="form-horizontal" role="form"> <div class="row"> <div class="col-sm-12 input-row clone-icon text-right"> <div class="form-group"> <div class="col-md-2 col-lg-2 left-on-mobile"> <label for="" class="control-label ">Textarea</label> </div> <div class="col-md-10 col-lg-10"> <textarea class="form-control form-input"></textarea> </div> </div> </div> <div class="col-sm-6 col-lg-4 input-row clone-icon text-right"> <div class="form-group"> <div class="col-md-4 col-lg-5 left-on-mobile"> <label for="" class="control-label ">Input Field</label> </div> <div class="col-md-8 col-lg-7"> <input type="text" class="form-control"> </div> </div> </div> <div class="col-sm-6 col-lg-4 input-row clone-icon text-right"> <div class="form-group"> <div class="col-md-4 col-lg-5 left-on-mobile"> <label for="" class="control-label ">Input Field</label> </div> <div class="col-md-8 col-lg-7"> <input type="text" class="form-control"> </div> </div> </div> <div class="col-sm-6 col-lg-4 input-row clone-icon text-right"> <div class="form-group"> <div class="col-md-4 col-lg-5 left-on-mobile"> <label for="" class="control-label ">Input Field</label> </div> <div class="col-md-8 col-lg-7"> <input type="text" class="form-control"> </div> </div> </div> </div> </form> 断点时，文本区域及其标签不再与其他元素对齐，如下所示：



看看我设置的网格，我可以看到为什么会发生这种情况，但我似乎无法找到符合我需求的模式而不会导致这个问题。我知道我可以开始使用CSS来破坏负边距来强制布局，但我觉得有更好的方法。

我该如何解决这个问题？

Here is a jsFiddle showing the issue

相关的HTML：

return errorResponse;

Answer 1

对于第一个输入字段，将col-lg-*类从5和7更改为6和6.这将使其<label>标记与之前的标记对齐行。

<div class="col-sm-6 col-lg-4 input-row clone-icon text-right">
    <div class="form-group">
        <div class="col-md-4  col-lg-6 left-on-mobile">
            <label for="" class="control-label  ">Input Field</label>
        </div>
        <div class="col-md-8  col-lg-6">
            <input type="text" class="form-control">
        </div>
    </div>
</div>

Demo link here