Question

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

桌面：

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

移动：

在另一篇文章中，我找到了一个解决方案，将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;
    }
}

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

当然，对于bootstrap gird系统，可能需要进行一些调整以使其正确...但这是它的本质。

和平。

垂直拉动Bootstrap网格元素

2 个答案: