Question

我试图熟悉Bootstrap和Grid。我正在尝试创建以下宏布局：

===================================================
| PageTitle              |________________________|
|________________________| +1  |________| img| img|
| Make a choice.         |_____|________|____|____|
|                        |                        |
===================================================

主要元素是一个jumbotron，其中有一排。然后我将行分成两个<div> class="col-xs-12"元素（我希望左侧面板在移动设备上保持在右上方）。

左侧面板进一步分为两行，包含一些文本内容。

右侧面板包含一行，再次分为两个部分。左侧和右侧部分均为class="col-xs-12 col-sm-3"。这是为了确保在较小的屏幕上，它们各自一个在另一个上面，并填充整个水平空间。行和另一列子结构如图所示分割空间。

到目前为止，我的代码是：Link

正如您将能够看到的那样，布局的行为与我期望的xs尺寸（低于768px）相同。但是，在较大的尺寸中，右侧面板中的行和列相互重叠，图像已消失。

理解为什么网格没有像我期望的那样运行的任何指导（即作为一个智能地以不同屏幕尺寸回流的表格），将不胜感激！

Answer 1

小型设备右侧面板上的网格结构似乎是错误的。

在JSFiddle的代码片段中。在行号17 and 32上，将class="col-xs-6 col-sm-3"更改为class="col-xs-6 col-sm-6"。

这会使图像再次出现。

<强>更新

当然，你可以，你只需要改变你构建的方法，任何结构都是可能的。检查this Fiddle。它以一种易于理解的方式显示列结构下的行和行下的列。

在您的情况下，您需要做的是在最顶层将您的结构划分为4列并在每列中执行任何操作。

最简单的方法来理解任何复杂的结构：

首先确定您的结构需要多少列。最重要的应该始终考虑到列。
确定列后，将每列视为全宽页面（暂时忽略其他列）并再次划分，依此类推。

简单： - ）

Answer 2

如果我问的问题不清楚，我道歉，但这是我试图做的事情。希望，与问题并排的答案将有助于澄清：

<强> HTML

<div class="row">
  <div class="col-xs-12 col-sm-5">
    <h2>
      PageTitle.
    </h2>
  </div>
  <div class="col-xs-6 col-sm-1 text-center">
    <h2>
      +1
    </h2>
  </div>
  <div class="col-xs-6 col-sm-2">
    <div class="statsbox">
      <div class="statsbaryes">
      </div>
      <div class="statsbarno">
      </div>
    </div>
  </div>
  <div class="col-xs-6 col-sm-2 text-center">
    <img id="image1" alt="image" src="http://www.intuac.com/userport/john/btpc5/baboon.png" class="img-circle" />
  </div>
  <div class="col-xs-6 col-sm-2 text-center">
    <img id="image2" alt="face" src="http://www.intuac.com/userport/john/btpc5/baboon.png" class="img-circle" />
  </div>
</div>

<强> CSS

.statsbaryes {
  height: 30px;
  background-color: green;
  width: 20%;
}
.statsbarno {
  height: 30px;
  background-color: red;
  width: 80%;
}
.statsbox {
  height: 66px;
  right: 0px;
  width: 100%;
  border: 3px solid grey;
}

https://jsfiddle.net/z9jvnahd/

正如我对Nikhil的回答中提到的那样，问题来自于我的误解，即我可以拥有尽可能多的行/列细分层，因为我想帮助构建布局，只要有12列对于屏幕上的每个逻辑行。但是，情况并非如此，并且列似乎需要全部组合在一个顶级行中才能正常运行 - 从我的实验中可以看出。

Bootstrap 3.3.6网格边界不提供刚性结构

2 个答案: