twitter-bootstrap 水平形式的 Bootstrap 左对齐复选框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41081275/
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 left align checkbox in horizontal form
提问by Jason C
I'm using Bootstrap 3.3.7. I have a horizontal form with a label-less checkbox, like this:
我正在使用 Bootstrap 3.3.7。我有一个带有无标签复选框的水平表单，如下所示：
<div class="container-fluid" style="max-width:600px">
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-2" for="field1">Field 1:</label>
<div class="col-sm-8">
<input class="form-control" type="text" id="field1"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="field2">Field 2:</label>
<div class="col-sm-8">
<input class="form-control" type="text" id="field2"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="field3">Field 3:</label>
<div class="col-sm-8">
<!-- HERE IS THE CHECKBOX: -->
<input class="form-control" type="checkbox" id="field3"/>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-8">
<button class="btn btn-default btn-primary" type="submit">Apply Changes</button>
</div>
</div>
</form>
</div>
I've created a Bootply demo here.
我在这里创建了一个Bootply 演示。
The problem is the checkbox is centered. I wanted it to be left aligned, so the left edge is aligned with the left edge of the text inputs above it.
问题是复选框居中。我希望它左对齐，因此左边缘与其上方文本输入的左边缘对齐。
How do I do that?
我怎么做？
I have tried:
我努力了：
- Adding class
text-leftto the div that contains the checkbox (result: no effect). - Removing the grid width specifiers from the checkbox div (result: it just ends up on the next line).
- Enclosing the checkbox input in a
labeltag, a wild guess after reading this post(result: it disappears). - Random hand-wavey rearrangements of divs (result: spirit crushed, git checkout to revert changes).
- 向
text-left包含复选框的 div添加类（结果：无效）。 - 从复选框 div 中删除网格宽度说明符（结果：它只是在下一行结束）。
- 将复选框输入括在一个
label标签中，阅读这篇文章后的一个疯狂猜测（结果：它消失了）。 - div 的随机手动重新排列（结果：精神崩溃，git checkout 恢复更改）。
I'm out of ideas.
我没主意了。
回答by sol
Can you add a class to the checkbox? Try this:
你可以在复选框中添加一个类吗？试试这个：
<input class="form-control move-left" type="checkbox" id="field3">
.move-left {
width: auto;
box-shadow: none;
}
Demo: http://www.bootply.com/At8YVfnm5F
演示：http: //www.bootply.com/At8YVfnm5F
Updatedas per gyre's comment.
根据 gyre 的评论更新。
回答by Mostafa Baezid
You can change the width initial or auto for the input id LiveOnBootplay
您可以更改输入 ID LiveOnBootplay 的初始宽度或自动宽度
input#field3 {
width: auto;
}
回答by gyre
Try changing the class of the div enclosing your checkbox from col-sm-8to col-sm-1and then added a class of checkbox-inlineto your input element.
尝试将包含复选框的 div 的类从col-sm-8to更改为col-sm-1，然后checkbox-inline在输入元素中添加一个类。
Demo:http://www.bootply.com/kjF1gVtWDC
演示：http : //www.bootply.com/kjF1gVtWDC
<div class="col-sm-1">
<!-- HERE IS THE CHECKBOX: -->
<input class="form-control checkbox-inline" type="checkbox" id="field3" />
</div>
