css - Bootstrap - 强制对齐响应元素

Question

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

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

然而，我发现我最终会在文本框周围使用控件换行或大量空白(甚至灰色空间) - 而不是填充以占用空间。

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

编辑

因此，我尝试为我的 slider 使用 Bootstrap 库，希望它能实现更好的布局，并尝试使用 Bootstrap 列大小调整。这给我留下了类似的问题，您可以在下面的 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>

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

Answer 1

Bootstrap 具有针对不同尺寸的控件。

您可以通过使用适当的类来控制列的呈现，例如:

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

这意味着，具有此类的列将呈现超过响应度，例如 100% 的容器宽度(智能手机)、50% 的容器宽度(平板电脑)、33% 的容器宽度(小型笔记本/桌面屏幕)和 25% 的容器高分辨率显示器上的宽度。

您也可以尝试将带有 class="row"的 div 放在您的列之前。 类行将取消列的左右填充。例如:

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

您可以找到有关 bootstrap 基础知识的更多信息 here