twitter-bootstrap 如何将引导程序复选框表单居中
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/39173271/
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
How to center bootstrap checkbox form
提问by Pablo Vera
I need to center this checkboxesCould anybody help me center this checkboxes? i've try so many things already.
我需要把这个复选框居中谁能帮我把这个复选框居中?我已经尝试了很多东西。
here's my code:
这是我的代码:
<div class="row checkbox-row">
<div class="col-sm-6">
<div class="checkbox-inline">
<label class="checkbox-inline"><input type="checkbox" value="">Adult News</label>
</div>
</div>
<div class="row checkbox-row">
<div class="col-sm-6">
<div class="checkbox-inline">
<label class="checkbox-inline"><input type="checkbox" value="">Youth News</label>
</div>
</div>
</div>
</div>
采纳答案by Adam Buchanan Smith
How about something like this? https://jsfiddle.net/sxh0n7d1/20/
这样的事情怎么样?https://jsfiddle.net/sxh0n7d1/20/
since bootstrap rows are in a 12 column grid, I checkboxes to span 2 columns each, and moved the 4 columns to the right by 4.
由于引导行位于 12 列网格中,因此我选中了每个复选框以跨越 2 列,并将 4 列向右移动 4。
<div class="row checkbox-row">
<div class="col-xs-2 col-xs-offset-4">
<div class="checkbox-inline">
<label class="checkbox-inline">
<input type="checkbox" value="">Adult News</label>
</div>
</div>
<div class="row checkbox-row">
<div class="col-xs-2">
<div class="checkbox-inline">
<label class="checkbox-inline">
<input type="checkbox" value="">Youth News</label>
</div>
</div>
</div>
</div>
回答by Labradorcode
Try this
试试这个
<div class="row checkbox-row">
<div class="col-sm-6">
<div class="checkbox-inline" style="text-align:center;">
<label class="checkbox-inline"><input type="checkbox" value="">Adult News</label>
</div>
</div>
<div class="row checkbox-row">
<div class="col-sm-6">
<div class="checkbox-inline" style="text-align:center;">
<label class="checkbox-inline"><input type="checkbox" value="">Youth News</label>
</div>
</div>
</div>
</div>
回答by Kiran Kumar
May not be the best solution but works if you change the col-sm as per your page.
可能不是最好的解决方案,但如果您根据您的页面更改 col-sm 则有效。
<div class="col-sm-3"></div>
<div class="col-sm-2">
<div class="checkbox-inline">
<label class="checkbox-inline"><input type="checkbox" value="">Adult News</label>
</div>
</div>
<div class="row checkbox-row">
<div>
<div class="checkbox-inline">
<label class="checkbox-inline"><input type="checkbox" value="">Youth News</label>
</div>
</div>
</div>
</div>
</div>

