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 example

然而，这会导致块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流出
  • 使容器变小

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 Fragment

/* 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。

Answer 2

我意识到你说你更喜欢只有css的解决方案，但在我看来，你想要完成的不是引导开发人员设计网格系统时的想法。我会用javascript把你那个吸盘粘在你需要的地方：

jQuery/html/css solution

我将您的列更改为容器（我称之为em存储桶）

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

Answer 3

我找到了一种聪明的方法。重新排列订单。将C放在B之前，然后使用推拉来交换订单

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

Answer 4

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