引导 - 强制对齐响应元素 [英] Bootstrap - forcing alignment of responsive elements

问题描述

我有几个元素，我真的很难水平对齐。我有一个中看到。

如果我能解决第一个图书馆的问题，我仍然宁愿使用第一个图书馆，如果我可以这样奖金。

我的HTML看起来像这样：

 < div id =settingsBarclass = > 
< div class =well bs-component col-sm-6> 
< form class =form-horizo​​ntal> 
< fieldset> 
< legend style =color：#ccc;>一般< / legend> 
< div class =form-group row> 
< label for =txtBackColorclass =col-sm-12 col-md-3 col-lg-4 control-label>背景颜色< / label& 
< div class =col-sm-12 col-md-9 col-lg-8 row> 
< div class =col-xs-1 col-sm-0>< / div> 
< input id =tglBackColortype =checkboxname =tglBackColorclass =bootstrap-toggle form-controlchecked data-on-color =successdata-off-color = > 
< input id =txtBackColortype =textclass =colorPicker form-control col-xs-10 col-sm-7 col-md-10 col-lg-11/> 
< / div> 
< / div> 
< / fieldset> 
< / form> 
< / div> 
< / div> 
  

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

解决方案

<

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

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

这意味着，与这样的类的collumn将响应率，如100％的容器宽度在高分辨率显示器上50％的容器宽度（片剂），33％的容器宽度（小笔记本/桌面屏幕）和25％的容器宽度。

您也可以尝试在列前加上cla​​ss =row的div。 类行将取消左右填充collumns。例如：

 < 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基础的信息此处

I've got a couple of elements that I'm really struggling to align horizontally. I've got a JSFiddle example to try and illustrate it. The layout that I'm trying to achieve in particular is looking at the first/left most Email field.

I wish to have both the slider and input field aligned with the label if space, or both of them sitting below the label otherwise.

What I find however is that I end up with the controls wrapping, or large amounts of whitespace (or greyspace even) around the textbox - rather than it filling to take up the space.

Unfortunately I've found that I can't seem to use col classes on the toggle because this causes issues with the rendering of it.

EDIT

So I've tried using a bootstrap library for my sliders instead in the hope that it'll allow for a better layout, and attempted to use bootstrap column sizing. This leaves me with the similar problems as you can see in the following JSFiddle.

I would still prefer to use the first library if I can so bonus if I can solve the problem with the first library.

My HTML looks something like this:

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

The problem I have is that depending on the size, the boxes overlap. What I want is for the final colour box to shrink down to fit on the same line, and the label sits either above or inline if there's enough space.

解决方案

Bootstrap has col- controls for different sizes.

You can control rendering of collumns by using proper classes, e.g.:

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

This means, collumn with such class will render over responsivity like 100% of container width (smartphones), 50% of container width (tablets), 33% of container width(small notebook/desktop screens) and 25% of container widht on high resolution displays.

You can also try put div with class="row" before your columns. Class row will cancel left and right padding of collumns. 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>

You can find more info about bootstrap basics here

这篇关于引导 - 强制对齐响应元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！