Bootstrap 列之间的垂直间隙答案

【问题标题】：Vertical gap between Bootstrap columnsBootstrap 列之间的垂直间隙
【发布时间】：2014-08-25 23:15:21
【问题描述】：

我正在尝试在 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 example

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

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

复制 html 并使用 visible-sm 和 visible-md 显示想要的布局。在 sm 上，它将有一个两列布局，第一列包含 A 和 C。
- 缺点：block内容也需要重复，可能包含很多html
使用 JavaScript 将块移动到正确的列（可能是 jQuery Masonry）。
- 缺点：我宁愿有一个纯 CSS 的解决方案
看看 flexbox、css 列和 css 网格。
- 缺点：不支持浏览器

【问题讨论】：

Flexbox 是最简单的方法，但正如你所说的浏览器支持还不存在......也就是说，如果你对旧浏览器在一个列中获取内容感到高兴，那就去吧那个。
大家跟我今天早上做的一模一样；但使用 Flex 方法。
也许在较新的浏览器上使用 flexbox 并为较旧的浏览器使用稍微不太理想的布局就可以了，感谢您的想法！

标签： css twitter-bootstrap responsive-design positioning

【解决方案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。

【讨论】：

谢谢！我听起来像是一个充满希望的开始
@Ruskin 你确定容器应该在行内吗？还是这只是实验性的？
不记得了，这是一年多以前的事了

【解决方案2】：

我知道您说过您更喜欢仅使用 css 的解决方案，但在我看来，您想要完成的并不是引导程序开发人员在设计网格系统时的想法。我会使用 javascript 将那个傻瓜粘在你需要的地方：

jQuery/html/css solution

我将您的列更改为容器（我称为 em buckets）

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;}
}

ps。很高兴看到人们使用手绘涂鸦来表达他们的想法，这也是我喜欢为人们分解它的方式：D

【讨论】：

感谢您的回答！ Bootstraps 网格确实不适用于此。我目前实施的有点像你的解决方案。 JavaScript 用于创建两种引导布局，一种用于两列布局，一种用于三列布局。带有.visible-sm 和.visible-md 的两个<div> 与onresize 侦听器结合使用以将小部件移动到正确的布局。附：手绘涂鸦真的很棒！
很高兴你想出了一个解决方案，这个解决方案让我想起了 Android 是如何处理 UI 的。在 xml 中，您将定义两种不同的布局（例如，一种用于横向，另一种用于纵向）并根据设备方向/屏幕尺寸膨胀/填充布局。我认为这比我们在 web 开发中所做的更优雅，因为问题的解决方案分布在 hmtl/css/js 中。谁知道几年后 Web UI 设计会是什么样子，也许我们会有一个更模块化/更简洁的设计过程：D

【解决方案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>

【讨论】：

也许我错了：getbootstrap.com/css/#grid-column-ordering BS 旨在支持列重新排序。您是否在代码笔中运行过它并查看垂直间隙是否仍然存在？

【解决方案4】：

我创建了一个带有固定宽度的包装 div 的小提琴。对于 320 的屏幕尺寸，减小了 wrapper 的宽度并将 B div 的浮点数更改为 float: right 在这里摆弄 - http://jsfiddle.net/afelixj/2q785vp5/2/

【讨论】：