垂直拉动 Bootstrap 网格元素

Question

我正在使用 Bootstrap 3 网格构建布局，应按如下方式堆叠：

桌面：

1 | 2
1 | 2
- | 2
3 | 2

手机：

1
1
-
2
2
2
2
-
3

在另一篇文章中，我找到了一个解决方案，可以将 box2 向右浮动，以便网格在桌面上正确堆叠。但是，这只适用于 box2 高于 box1 的情况。如果不是，box3 将显示在 box2 下方，而不是 box1。如上所示，还有其他方法可以堆叠这些盒子吗？所有三个框都可以有不同的高度，并且可以包含任意数量的文本、图像、表格等。

http://jsfiddle.net/G9WPv/

Answer 1

这在 CSS 中是非常可能的，你可以通过 Bootstrap 的网格布局来做到这一点。为了解决这个问题，您需要利用左右浮动的属性。

演示：http://www.bootply.com/l0Flnma2Im

考虑以下示例。您希望这会在 xs 视口上按预期 100% 显示，因为每个视口都将按照您想要的顺序显示 100% 宽度。而且，您希望它在 md/lg 浏览器上也能按预期显示，左边是 1/3，右边是 2。

<div class="col-xs-12 col-md-6">
  <div>1<br>1</div>
</div>
<div class="col-xs-12 col-md-6 pull-right">
  <div>2<br>2<br>2<br>2<br>2</div>
</div>
<div class="col-xs-12 col-md-6">
  <div>3</div>
</div>

现在，出现的唯一问题是“1”块扩展得比“2”块大。发生这种情况时，右侧会出现 3。为什么会这样？发生这种情况是因为浮动只是试图填补右侧的空白。但是，我们可以通过使用clear: left; 来强制它始终位于左侧，以确保其左侧不会出现任何内容。

.always-left {
    clear: left;
  }

代码现在变成：

<div class="col-xs-12 col-md-6">
  <div>1<br>1</div>
</div>
<div class="col-xs-12 col-md-6 pull-right">
  <div>2<br>2<br>2<br>2<br>2</div>
</div>
<div class="col-xs-12 col-md-6 always-left">
  <div>3</div>
</div>

Answer 2

这很可能只使用媒体查询和一些绝对定位。

Look at this fiddle

您需要将 3 个 div 包装在一个容器中。

基本上你的 CSS 看起来像这样。

.container {
    width: 100%;
    position: relative;
}
#box1 {
    background-color: #d7d7d7;
    width: 100%;
}
#box2 {
    background-color: #e7e7e7;
    width: 100%;
    position: relative;
}
#box3 {
    background-color: #f7f7f7;
    width: 100%;
}

@media screen and (min-width: 700px) {
    #box1, #box3 {
        width: 40%;
    }
    #box2 {
        width: 60%;
        position: absolute;
        top: 0;
        right: 0;
    }
}

这些盒子可以是任何尺寸，在移动设备尺寸的屏幕上，它们会以正确的顺序堆叠。

当然，对于引导网格系统，可能需要进行一些调整才能使其恰到好处......但这就是它的本质。

和平。