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

Question

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

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

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

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

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

这是我到目前为止的代码：链接

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

任何了解为什么网格没有按我预期运行(即作为在不同屏幕尺寸下智能重排的表(的任何指导，将不胜感激！

Answer 1

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

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

这将使图像再次出现。

更新：

当然可以，你只需要改变你采用的构造方法，任何结构都是可能的。检查这个小提琴。它以简单易懂的方式显示行下的列和列结构下的行。

在您的情况下，您需要做的是在最顶层将您的结构分成 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 列，我就可以拥有尽可能多的行/列细分层，以帮助构建布局。但是，事实并非如此，并且根据我的实验，这些列似乎需要全部组合在一个 signle 顶级行中才能正确运行。