中型设备上的 Bootstrap 3 行中断答案

【问题标题】：Bootstrap 3 row breaks on medium devices中型设备上的 Bootstrap 3 行中断
【发布时间】：2013-09-19 22:39:30
【问题描述】：

我对不同大小的 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>

在中型和大型显示器上看起来像：

–––––––––––––––––   –––––––––––––––––   ––––––––––––––––   ––––––––––––––––
| Lots of stuff |   |   Less stuff  |   |   Whooa!     |   |  More stuff  |
|               |   –––––––––––––––––   |              |   |              |
|               |                       ––––––––––––––––   ––––––––––––––––
|               |
–––––––––––––––––

真是太好了。但在小型显示器上看起来像：

–––––––––––––––––   ––––––––––––––––– 
| Lots of stuff |   |   Less stuff  |
|               |   ––––––––––––––––– 
|               |   ––––––––––––––––
|               |   |    Whooa!    |
–––––––––––––––––   |              |
                    ––––––––––––––––                       
––––––––––––––––
|  More stuff  |
|              |
––––––––––––––––

这与我脑海中的美丽画面相去甚远：

–––––––––––––––––   ––––––––––––––––– 
| Lots of stuff |   |   Less stuff  |
|               |   ––––––––––––––––– 
|               |
|               |
–––––––––––––––––
–––––––––––––––––   ––––––––––––––––– 
|    Whooa!     |   |  More stuff   |
|               |   |               |
–––––––––––––––––   –––––––––––––––––

简单的解决方案是为这些 div 设置一个最小高度，但在这种情况下这不是一个真正的选择。

请帮忙！

编辑：添加小提琴http://bootply.com/81952

【问题讨论】：

您可以分别包装这对divs。我想这会解决你的问题。
你能解释一下为什么 min-height 不是一个选项吗？我认为这是你唯一的选择：bootply.com/81954
使网站经得起客户考验。随着时间的推移，客户将大量编辑文本，而修复一个最小高度是行不通的。
天哪，我可不想穿上你的鞋。我以前遇到过这个问题，我认为这甚至不可能。不过请检查此链接：matthewjamestaylor.com/blog/… 不确定这是否与 Bootstrap 兼容。为什么让 div 使用 100% 的可用垂直空间如此困难，我真的无法理解。

标签： css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

Bootstrap 3方式如下：

在第二个和第三个 div 之间，添加以下 HTML：

<div class="clearfix visible-sm"></div>

在此处查看工作示例：http://bootply.com/81970。

文档在这里：http://getbootstrap.com/css/#grid-responsive-resets

【讨论】：

非常感谢！非常适合我。

【解决方案2】：

您可以尝试分别包装这对 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>

【讨论】：

实际上，将它们包装在一对 div 上，引导样式，就可以了。 bootply.com/81967谢谢！