css - Bootstrap 列之间的垂直间隙

Question

我正在尝试在 Bootstrap 中创建一个布局，在较大的屏幕上显示三个 block ，在较小的屏幕上显示两个 block (断点发生在 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 example

然而，这会导致 block A 和 C 之间出现不需要的垂直间隙。

在我看来，我有几个可能的选项来消除垂直间隙，但也许有更好的解决方案:

• 复制 html 并使用 visible-sm 和 visible-md 来显示所需的布局。在 sm 上，它将有两列布局，第一列同时包含 A 和 C。
  • 缺点: block 内容也需要复制，其中可能包含大量html
• 使用 JavaScript 将 block 移动到正确的列(可能是 jQuery Masonry)。
  • 缺点:我宁愿有一个只有 CSS 的解决方案
• 看看 flexbox、css 列和 css 网格。
  • 缺点:不支持浏览器

Answer 1

http://codepen.io/elliz/pen/fvpLl 上未经测试的不完美解决方案| .要点:

• 小宽度
  • 让 B 脱离流程
  • 缩小容器

HTML

<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 (准备就绪时)容易得多 - latest alpha version of Bootstrap不支持 flexbox。