Bootstrap列之间的垂直间隙

Question

我正在尝试在Bootstrap中创建一个布局,在较大的屏幕上显示三个块,在较小的屏幕上显示两个块(断点出现在sm和md之间).

<div class="row">
    <div class="container">
        <div class="col-xs-6 col-md-4">A - 50</div>
        <div class="col-xs-6 col-md-4">B - 100</div>
        <div class="col-xs-6 col-md-4">C - 75</div>
    </div>
</div>

请参阅CodePen示例

然而,这导致块A和C之间的不希望的垂直间隙.

在我看来,我有一些可能的选择来消除垂直间隙,但也许有一个更好的解决方案:

• 复制html并使用visible-sm和visible-md来显示所需的布局.在sm上,它将具有两列布局,第一列包含A和C.
  • 缺点:块内容也需要重复,可能包含很多html
• 使用JavaScript将块移动到正确的列(也许是jQuery Masonry).
  • 缺点:我宁愿只有CSS解决方案
• 看一下flexbox,css列和css网格.
  • 缺点:浏览器支持不存在

Answer 1

http://codepen.io/elliz/pen/fvpLl上不完美的未经测试的解决方案。关键点：

• 小宽度时
  • 使 B 脱离流程
  • 让容器变小

超文本标记语言

<div class="container">
<!-- note: sm -> container 50% -->
  <div class="row col-xs-6 col-md-12"> 
    <!-- note: sm -> div = 100% of container which is 50% -->
    <div class="col-xs-12 col-md-4 h50">A - 50</div>
    <div class="col-xs-12 col-md-4 h100">B - 100</div>
    <div class="col-xs-12 col-md-4 h75">C - 75</div>
  </div>
</div>

CSS 片段

/* xs and sm */
@media ( max-width: 991px) { 
  .h100 {
    position: absolute !important; /* better to do with specificity, but quick ugly hack */
    margin-left:93%;
  }
}

间距并不完美，但为您的实验提供了一个起点。

注意：这可以使用FlexBox和Grid（准备好后）更容易地实现- 并且Bootstrap 的最新 alpha 版本确实支持 Flexbox。