twitter-bootstrap Bootstrap 中的 4 列响应式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41233084/
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
4 column responsive in Bootstrap
提问by Ahmad Abed
I want to make a row with 4 columns. When the user uses a tablet the row will have 2 columns and the remaining 2 will jump under the row.
我想用 4 列制作一行。当用户使用平板电脑时，该行将有 2 列，其余 2 列将跳到该行下方。
Then when the user uses mobile the row will have 1 column and the other columns will jump under each other.
然后当用户使用移动设备时，该行将有 1 列，其他列将相互跳跃。
Can you help me with this? I've tried this:
你能帮我解决这个问题吗？我试过这个：
<div class="col-md-3 col-sm-6 col-xs-12">
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
</div>
回答by ab29007
The issue seems to be the margin or border that you may have to those for divs. Also you always have to wrap them in a <div class="row">
问题似乎是您可能对 div 的边距或边框。此外，您始终必须将它们包裹在<div class="row">
give all of them a single class (say "bootCols") and add this css:
给他们所有人一个单一的类（比如“bootCols”）并添加这个css：
.bootCols{
margin:0;
box-sizing:border-box;
padding:5px;
border:2px solid auto;
}
you can remove/edit padding and border in this css as you require
您可以根据需要删除/编辑此 css 中的填充和边框
Here's live example:
这是一个活生生的例子：
.bootCols{
height:100px;
margin:0;
box-sizing:border-box;
padding:5px;
border:2px solid black;
background-color:red;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-12 bootCols">
</div>
<div class="col-md-3 col-sm-6 col-xs-12 bootCols">
</div>
<div class="col-md-3 col-sm-6 col-xs-12 bootCols">
</div>
<div class="col-md-3 col-sm-6 col-xs-12 bootCols">
</div>
</div>
</div>