Bootstrap - 强制响应元素的对齐

Question

我有几个元素，我真的很难横向对齐。我有一个JSFiddle example试图说明一下。我特别想要实现的布局是查看第一个/最左边的电子邮件字段。

我希望滑块和输入字段与标签对齐（如果是空格），或者两者都位于标签下面。

然而，我发现我最终得到的是控件包装，或者文本框周围的大量空白（或者甚至是greyspace） - 而不是填补占据空间。

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

修改

所以我尝试使用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>

我遇到的问题是，根据尺寸，框重叠。我想要的是最终的颜色框缩小到适合同一条线，如果有足够的空间，标签就位于上方或内联。

Answer 1

Bootstrap具有不同大小的控件。

您可以使用适当的类来控制柱的渲染，例如：

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

这意味着，与此类相匹配将呈现超过100％容器宽度（智能手机），50％容器宽度（平板电脑），33％容器宽度（小型笔记本/台式机屏幕）和25％容器的响应度在高分辨率显示器上。

您也可以在列之前尝试将div与class =“row”放在一起。 类行将取消柱的左右填充。 E.g：

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

的更多信息