Html Bootstrap 复选框输入垂直对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19308366/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap checkbox input align vertically
提问by Seong Lee
Using Bootstrap version 2.3.2, I have a form layout like the below image and since the checkbox has an inline label, there is an aligning issue.
使用 Bootstrap 2.3.2 版，我有一个如下图所示的表单布局，并且由于复选框具有内联标签，因此存在对齐问题。
Adding margin to input[type="checkbox"]only gives margin to the checkbox, not the inline label. How do I make it so the checkbox and its label vertically align to the text fields next to it?
添加边距input[type="checkbox"]只为复选框提供边距，而不是内联标签。如何使复选框及其标签与旁边的文本字段垂直对齐？
Here is the JS BINif you are interested.
如果您有兴趣，这里是 JS BIN。
回答by Vainglory07
In your HTMLadd a class that will handle the checkbox margin:
在您的HTML 中添加一个类来处理复选框边距：
<div class="container-fluid">
<div class="row-fluid">
<div class="span3">
<label>label 1</label>
<input type="text" />
</div>
<div class="span3">
<label>label 2</label>
<input type="text" />
</div>
<div class="span3 checkbox">
<input type="checkbox" />test description
</div>
</div>
</div>
and in your CSS:
在你的CSS 中：
input[type="checkbox"] {
// i just remove this part..
}
.checkbox {
margin: 30px 0 0 0;
}
Don't put the margin on the checkbox, but on the parent div. Check this jsFiddle.
不要将边距放在复选框上，而是放在父 div 上。检查这个jsFiddle。
Hope this helps
希望这可以帮助
回答by Giovanni Silveira
Try to always use something like this:
尝试总是使用这样的东西：
<div class="span3">
<label for="checkbox" class="checkbox">
<input type="checkbox" id="checkbox" class="checkbox">test description
</label>
</div>
回答by Zartc
I just solved this exact problem in bootstrap 3, by simply limiting the height of inline checkboxes to 12 pixels. They are by default 40px, I don't know why !
我刚刚在 bootstrap 3 中解决了这个确切的问题，只需将内联复选框的高度限制为 12 像素。它们默认为 40px，我不知道为什么！
<div class="checkbox-inline">
<label>
<input type="checkbox" checked="checked" />
<span>My correctly aligned check-box</span>
</label>
</div>
add this in your css file (I personally have a css file named bootstrap-custom.css):
将此添加到您的 css 文件中（我个人有一个名为 bootstrap-custom.css 的 css 文件）：
/*
Checkboxes in inline forms are misaligned because for an unknow reason they inherit a height of 40px !
This selector limit the height of inline checkboxes to 12px which is the perfect value to align them to
the other widgets in an inline form.
*/
.radio-inline, .checkbox-inline {
max-height: 12px;
}
回答by Zim
How about putting a <label>before the checkbox like this? ..
<label>在这样的复选框前放一个怎么样？..
<div class="container-fluid">
<div class="row-fluid">
<div class="span3">
<label>label 1</label>
<input type="text">
</div>
<div class="span3">
<label>label 2</label>
<input type="text">
</div>
<div class="span3">
<label>test</label>
<input type="checkbox">
</div>
</div>
</div>
Bootply: http://bootply.com/86998
Bootply：http://bootply.com/86998
回答by Jeff
Not ideal solution but change your code to ...
不是理想的解决方案，但将您的代码更改为...
<div class="span5">
<input type="checkbox">test description</input>
</div>
and set the margin-top on that. I will result as you want - better.
并在其上设置边距顶部。我会如你所愿 - 更好。
