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块之间出现不必要的垂直间隙。

如我所见，我有几个可能的选项来消除垂直间隙，但也许有更好的解决方案：

1. 复制HTML并使用visible-sm和visible-md显示所需的布局。 在sm上，它将具有两列布局，第一列包含A和C。

缺点：块内容也需要被复制，其中可能包含大量HTML

2. 使用JavaScript将块移动到正确的列中（可能使用jQuery Masonry）。

缺点：我宁愿使用纯CSS的解决方案

3. 查看flexbox、css列和css网格。

缺点：浏览器支持不足

- ckuijjer

---

Flexbox是最简单的方法，但正如你所说，浏览器支持还不够...话虽如此，如果你愿意让旧版浏览器以单列方式获取内容，那就选择它吧。 - Ruskin

同志们，我今天早上也在做同样的事情，但是使用了 Flex 方法。 - Kheema Pandey

也许在新的浏览器中使用flexbox，并为旧的浏览器提供略微不太优化的布局会更好，感谢这个想法！ - ckuijjer

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（当它准备好时）更轻松地实现 - Bootstrap最新的alpha版本支持flexbox。

- Ruskin

---

谢谢！听起来很有前途的开始。 - ckuijjer

@Ruskin 你确定容器应该在行内吗？还是这只是实验性的？ - Alexander Solonik

无法记起，这已经是一年前的事了。 - Ruskin

Answer 2

我知道你说你更喜欢一个纯CSS的解决方案，但是在我看来，当Bootstrap开发人员设计网格系统时，并不是你要实现的目标。我建议使用JavaScript把它粘到需要的地方：

jQuery/html/css solution

我把你的列更改为容器（我称它们为“bucket”）

HTML

    <div class="row">
  <div class="container">
    <div id="leftBucket" class="col-xs-6 col-md-4">
      <div id="A" class="h50">A - 50</div>
    </div>
    <div id="middleBucket" class="col-xs-6 col-md-4">
      <div id="B" class="h100">B - 100</div>
    </div>
    <div id="rightBucket" class="hidden-sm col-md-4">
      <div id="C" class="h75">C - 75</div>
    </div>
  </div>
</div>

<div id="hiddenDiv"></div>

---

然后我从下面评论中的链接“借鉴”了一种监视媒体查询的方法

JS

// stolen from: http://www.fourfront.us/blog/jquery-window-width-and-media-queries
$(window).resize(function(){    
    if ($("#hiddenDiv").css("float") == "none" ){
    // small screen!
    $('#C').appendTo('#leftBucket');
    } else {
    //not a small screen :P
    $('#C').appendTo('#rightBucket');
  }
});

---

并为隐藏的 div（我用来观察屏幕宽度）添加了一些规则 CSS

#hiddenDiv {float:left;}
@media only screen and (max-width: 992px){
    #hiddenDiv {float:none;}
}

顺便说一句，看到人们使用手绘涂鸦来表达他们的想法真是太好了，这也是我喜欢向人们解释的方式 :D

- Jacob McKay

---

感谢您的回答！Bootstrap的网格确实不适用于此。我目前实现的方法有点像您的解决方案。使用JavaScript创建了两个Bootstrap布局，一个用于两列布局，另一个用于三列布局。使用带有.visible-sm和.visible-md类的两个<div>与onresize监听器相结合，将小部件移动到正确的布局中。顺便说一句，手绘涂鸦确实很棒！ - ckuijjer

很高兴你想出了一个解决方案，这个解决方案让我想起了Android如何处理UI。在xml中，您可以定义两个不同的布局（例如横向和纵向），并根据设备方向/屏幕大小填充布局。我认为这比我们在Web开发中所做的更优雅，因为问题的解决方案分散在hmtl/css/js中。谁知道未来几年Web UI设计会是什么样子，也许我们会有一个更模块化/更清洁的设计过程:D - Jacob McKay

Answer 3

我找到了一个巧妙的方法来做这件事。重新排列顺序。将C放在B之前，然后使用push和pull来交换顺序。

<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 col-md-push-4 ">C - 75</div>
        <div class="col-xs-6 col- col-md-4 col-md-pull-4">B- 100</div>
    </div>
</div>

- Edward Manda

---

也许我错了：http://getbootstrap.com/css/#grid-column-ordering BS旨在支持列重新排序。你在codepen上运行过这个代码，并查看垂直间隙是否仍然存在吗？ - Jacob McKay

Answer 4

我创建了一个带有固定宽度包装 div 的 fiddle。 对于 320 屏幕尺寸，我减小了包装器的宽度，并将 B div 的浮动方式更改为 float: right。 这是 Fiddle 链接 - http://jsfiddle.net/afelixj/2q785vp5/2/

- Felix A J