Bootstrap 3：如何使较低的列（默认xs /移动布局）在较大视口中更高？

Question

我遇到了非移动设备的布局问题。 我有四列，以下是它们的顺序（宽度适用于sm/md/lg）：

A(3-wide)
B(9-wide)
C(9-wide)
D(3-wide)

B列是一个高度不固定的大列，因此A列始终会比B列短。当视口扩展时，我的问题是我无法让D坐在A下面，尽管它们都是3列宽，并且在A下面有空白/未填充的空间。

我想要的：

BBB A
BBB D
BBB
CCC

我现在拥有什么：

BBB A
BBB
BBB
CCC D

无论我尝试使用推/拉、嵌套等方法，D都不会跳到A下面的空间里。

这是我的代码，简化为基础形式：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-3 pull-right">
            <p>(A) Right-aligned, 3-wide div that's pretty short</p>
        </div>
        <div class="col-xs-12 col-sm-9 pull-left">
            <h1>(B) Left-aligned, large variable height content div.</h1>
            <h1>(B)</h1>
            <h1>(B)</h1>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12 col-sm-9">
            <h3>(C) Left-aligned smaller content div</h3>
            <h3>(C)</h3>
            <h3>(C)</h3>
        </div>
        <div class="col-xs-12 col-sm-3">
            <h4>(D) Right-aligned, 3-wide div that I want to go below the first 3-wide div</h4>
            <h4>(D)</h4>
            <h4>(D)</h4>
            <h4>(D)</h4>
            <h4>(D)</h4>
            <h4>(D)</h4>
        </div>
    </div>
</div>

我也在纸上画了一张图，如果有助于想象所需的布局: 非常感谢任何帮助。提前致谢。

- Peter Simones

Answer 1

如果需要确切的4列，可以使用以下方案：

1. 将B和C块包装到另一个块中。
2. 当屏幕宽度达到786像素或更多时，在块A上应用float: right属性。我为此定义了一个新的特殊类。

请检查结果：https://jsfiddle.net/glebkema/ckLqrfmp/

@media (min-width: 768px) {
  .pull-sm-right {
    float: right !important;
  }
}

/* Decorations */
#A, #B, #C, #D { 
  font-size: 24px;
  font-weight: bold;
  color: #fff;
  padding-top: 6px; 
}
#A { background: #c69; min-height:  50px; }
#B { background: #9c6; min-height: 150px; }
#C { background: #69c; min-height: 100px; }
#D { background: #ff0; min-height: 250px; }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div id="A" class="col-sm-3 pull-sm-right">A</div>
    <div class="col-sm-9">
      <div class="row">
        <div id="B" class="col-xs-12">B</div>
        <div id="C" class="col-xs-12">C</div>
      </div>
    </div>
    <div id="D" class="col-sm-3">D</div>
  </div>
</div>

- Gleb Kemarsky

---

我不会推荐这个解决方案。原因有两个：a）这个解决方案引入了15列网格（3 + 9 + 3），而Botstrap是为12列网格编写（并测试）。我无法强调使用框架的开发人员按照文档建议使用它的重要性。这不是我固执己见，我只是浪费了太多时间来调试像这样的hack。b）这个解决方案没有解决用户Peter Simones正在处理的主要问题：即由float：left / right元素引起的间隙。有关更多详细信息，请搜索“float vertical gap issue”。 - Danko

@Danko 感谢您的反馈。我使用了标准的12列网格，列包装和嵌套列。所有这些功能都在Bootstrap文档中有描述。我的.pull-sm-float类基于Bootstrap的快速浮动。 - Gleb Kemarsky

@GlebKemarsky 如果我可以点赞10次，我一定会的。非常感谢。这让我的一天都变得美好了。（解决方案完美地运行。） - Peter Simones

@PeterSimones 很高兴能够帮到你 :) 欢迎来到SO！ - Gleb Kemarsky

Answer 2

提到的间隙是浮点数运作的结果。常见的解决方案是使用 masonry jQuery 插件。换句话说，你不能用 CSS 来修复它，但可以用 JavaScript。希望这能帮到你。

- Danko

---

我希望能够得到解释为什么这个答案被踩了。 - Danko

这不是我的声音。我猜可能的原因是问题可以通过CSS解决。如果您能分享一下为什么我的答案被评为负分，我将不胜感激。 - Gleb Kemarsky