Question

我有不同大小的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＆amp;大型显示器如下所示：

–––––––––––––––––   –––––––––––––––––   ––––––––––––––––   ––––––––––––––––
| 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

Answer 1

Bootstrap 3方式如下：

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

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

请参阅此处的工作示例：http://bootply.com/81970。

此处的文件：http://getbootstrap.com/css/#grid-responsive-resets

Answer 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>

中型设备上的Bootstrap 3行中断

2 个答案: