Bootstrap - 强制对齐响应元素答案

【问题标题】：Bootstrap - forcing alignment of responsive elementsBootstrap - 强制对齐响应元素
【发布时间】：2014-03-06 22:28:33
【问题描述】：

我有几个元素很难水平对齐。我有一个JSFiddle example 来尝试说明它。我特别想实现的布局是查看第一个/最左边的电子邮件字段。

如果有空格，我希望滑块和输入字段都与标签对齐，否则它们都位于标签下方。

然而，我发现我最终得到了控件环绕，或者文本框周围有大量空白（甚至是灰色空间） - 而不是填充以占用空间。

不幸的是，我发现我似乎无法在切换开关上使用 col 类，因为这会导致渲染出现问题。

编辑

所以我尝试为我的滑块使用引导库，希望它可以提供更好的布局，并尝试使用引导列大小。这给我留下了类似的问题，您可以在下面的JSFiddle 中看到。

如果我可以解决第一个库的问题，我仍然会更喜欢使用第一个库。

我的 HTML 看起来像这样：

<div id="settingsBar" class="">
    <div class="well bs-component col-sm-6">
        <form class="form-horizontal">
            <fieldset>
                <legend style="color: #ccc;">General</legend>
                <div class="form-group row">
                    <label for="txtBackColor" class="col-sm-12 col-md-3 col-lg-4 control-label">Background Colour</label>
                    <div class="col-sm-12 col-md-9 col-lg-8 row">
                        <div class="col-xs-1 col-sm-0"></div>
                        <input id="tglBackColor" type="checkbox" name="tglBackColor" class="bootstrap-toggle form-control" checked data-on-color="success" data-off-color="danger">
                        <input id="txtBackColor" type="text" class="colorPicker form-control col-xs-10 col-sm-7 col-md-10 col-lg-11" />
                    </div>
                </div>
            </fieldset>
        </form>
    </div>
</div>

我遇到的问题是，根据大小，框会重叠。我想要的是最终的颜色框缩小以适应同一行，如果有足够的空间，标签位于上方或内联。

【问题讨论】：

您将列放在行中，不要将 div 中的行包含在其他列中，例如
- 在其周围放置一个
并删除该行，使其变为：
@RyanMcDonough：好的——虽然我不相信，但把它拿出来似乎并没有什么不同？如果它确实并解决了问题，您可以修改 JSFiddle 来说明吗？

<div class="row"> <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">some div</div> <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">some div</div> <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">some div</div> </div>