twitter-bootstrap 中型设备上的 Bootstrap 3 行中断
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18896335/
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 3 row breaks on medium devices
提问by user2795613
I have a problem with differently sized divs. I'd like to have and row that displays 3 column wide divs on medium & large displays and 6 column wide divs on small devices.
我对不同大小的 div 有问题。我想要在中型和大型显示器上显示 3 列宽 div 和在小型设备上显示 6 列宽 div 的行。
<div class="container">
<div class="row">
<div class="service col-sm-6 col-md-3">Lots of stuff</div>
<div class="service col-sm-6 col-md-3">Less stuff</div>
<div class="service col-sm-6 col-md-3">Whooa!</div>
<div class="service col-sm-6 col-md-3">More stuff</div>
</div>
</div>
on medium & large displays this looks like:
在中型和大型显示器上，这看起来像：
––––––––––––––––– ––––––––––––––––– –––––––––––––––– ––––––––––––––––
| Lots of stuff | | Less stuff | | Whooa! | | More stuff |
| | ––––––––––––––––– | | | |
| | –––––––––––––––– ––––––––––––––––
| |
–––––––––––––––––
which is just great. but on small displays it looks like:
这太棒了。但在小显示器上，它看起来像：
––––––––––––––––– –––––––––––––––––
| Lots of stuff | | Less stuff |
| | –––––––––––––––––
| | ––––––––––––––––
| | | Whooa! |
––––––––––––––––– | |
––––––––––––––––
––––––––––––––––
| More stuff |
| |
––––––––––––––––
which is quite far from this pretty picture i have in my mind:
这与我脑海中的这张漂亮照片相去甚远：
––––––––––––––––– –––––––––––––––––
| Lots of stuff | | Less stuff |
| | –––––––––––––––––
| |
| |
–––––––––––––––––
––––––––––––––––– –––––––––––––––––
| Whooa! | | More stuff |
| | | |
––––––––––––––––– –––––––––––––––––
Easy solution would be to give these divs an minimum height but that is not really an option in this case.
简单的解决方案是给这些 div 一个最小高度，但在这种情况下这不是一个真正的选择。
Please help!
请帮忙！
edit: added fiddle http://bootply.com/81952
编辑：添加小提琴http://bootply.com/81952
回答by Sean Ryan
The Bootstrap 3 way is as follows:
Bootstrap 3 方式如下：
In between your second and third div, add the following bit of HTML:
在第二个和第三个 div 之间，添加以下 HTML 代码：
<div class="clearfix visible-sm"></div>
See working example here: http://bootply.com/81970.
请参阅此处的工作示例：http: //bootply.com/81970。
Documation here: http://getbootstrap.com/css/#grid-responsive-resets
文档在这里：http://getbootstrap.com/css/#grid-responsive-resets
回答by Praveen
You can try wrapping those pair divsseparately. somewhat like this
您可以尝试分别包装这些对divs。有点像这样
<div class="container">
<div class="row">
<div class="inner1"> -------------------------------------------
<div class="service col-sm-6 col-md-3">Lots of stuff</div> |
<div class="service col-sm-6 col-md-3">Less stuff</div> |
</div>----------------------------------------------------------
<div class="inner2"> -------------------------------------------
<div class="service col-sm-6 col-md-3">Whooa!</div> |
<div class="service col-sm-6 col-md-3">More stuff</div> |
</div>----------------------------------------------------------
</div>
</div>
