基于设备分辨率的引导列布局

Question

使用 Bootstrap 3，我有 3 列，如下所示：

<div class="container container-fluid">
    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">1</div>
    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">2</div>
    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">3</div>
</div>

大型设备和台式机的 Cols 为 33%，平板电脑为 50%，移动设备为 100%。当它进入桌面时（768px-992px 我认为是经典的 Bootstrap 断点），我需要第三列位于前两列下方并位于屏幕中间。

我该怎么做？

稍后编辑：我已经设法将另一个类添加到第三列：

<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 myclass">3</div>

然后改变我的主题的媒体查询

@media all and (min-width: 769px) and (max-width: 992px) {
    .myclass {
        margin-left: 25%;
        margin-top: 30px;
    }
}

但我仍然希望有另一种方法，而不改变 Bootstrap 默认类。还有其他想法吗？

这就是我需要的：http://s12.postimg.org/9xynp7mod/layout.png

Answer 1

您可以使用 Bootstrap 的 col-offset 类实现我认为您正在寻找的效果，类似于以下内容

<div class="red col-xs-4 col-xs-offset-2 col-sm-offset-0"></div>
<div class="green col-xs-4"></div>
<div class="blue col-xs-4 col-xs-offset-4 col-sm-offset-0"></div>

它们本质上会在相关元素的左侧添加一个边距，该边距等于内容列的数量，就像您在示例代码中一样。至于垂直间距，不幸的是您必须手动添加，因为 Bootstrap 并没有真正对垂直对齐做任何事情。

有关工作示例，请参阅 https://jsfiddle.net/zwoL2uwe/1/，有关文档中列偏移的详细信息，请参阅 http://getbootstrap.com/css/#grid-offsetting

Answer 2

首先要注意几点：

1. 尝试首先考虑移动设备，它对 Bootstrap 很有帮助。所以把移动课程放在第一位。
2. 您无需指定所有尺寸，将应用最小的尺寸。例如，只需使用col-xs-* 和col-lg-*，大小sm 和md 将与xs 相同。
3. 确保遵循 Bootstrap 标准并使用正确的类层次结构。您缺少 row div。

现在要解决您的问题，您的代码如下所示。注意可以嵌套row元素：

.red {
  background-color: red;
}
.blue {
  background-color: blue;
}
.green {
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<div class="container container-fluid">
  <div class="row">
    <div class="col-xs-12 col-sm-6  col-lg-4 red">1</div>
    <div class="col-xs-12 col-sm-6  col-lg-4 blue">2</div>
    <div class="col-xs-12 col-sm-12 col-lg-4">
        <div class="row">
            <div class="col-sm-6 col-sm-push-3 col-lg-push-0 col-lg-12 green">3</div>
        </div>
    </div>
  </div>
</div>

Answer 3

将 col-sm-push-4 添加到第三个。像这样：

<div class="container">
      <div class="row">
          <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">This is Div 1</div>
          <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">This is Div 2</div>
          <div class="col-sm-push-4 col-lg-4 col-md-4 col-sm-6 col-xs-12">This is Div 3</div>
      </div>
</div>

您可能需要稍微调整一下数字才能得到您想要的结果。