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

【问题标题】：Bootstrap 3.3.6 Grid boundaries not providing a rigid structureBootstrap 3.3.6 网格边界不提供刚性结构
【发布时间】：2016-01-30 22:22:06
【问题描述】：

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

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

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

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

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

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

如您所见，布局在 xs 大小（低于 768 像素）下的表现与我预期的一样。但是，在较大的尺寸下，右侧面板中的行和列相互重叠，图像消失了。

任何关于为什么网格没有按我期望的那样运行的指导（即作为一个在不同屏幕尺寸下智能重排的表格），我们将不胜感激！

【问题讨论】：

几乎每个元素都有height 和width 属性有什么原因吗？我认为您需要阅读 Bootstrap 文档，因为您似乎不了解网格系统的实际工作原理。您还有很多 div 标记，其类别为 row，但其中没有列。总的来说，你混合和匹配随机类。
高度和宽度只是为了看看我是否可以强制 col-- 以适当的分辨率占据屏幕的正确数量。它没有用。删除它们会使列重叠。
其中有两行没有列，而这些恰好按照我想要的方式显示。示例的相关部分，没有这个问题。我实际上已经从上到下阅读了引导文档，这就是我问这个问题的原因——也许我误解了网格应该如何工作。

标签： html css twitter-bootstrap

【解决方案1】：

小设备右侧面板的网格结构好像有问题。

在您的 JSFiddle 的代码 sn-p 中。在行号17 and 32，将class="col-xs-6 col-sm-3"改为class="col-xs-6 col-sm-6"。

这会使图像再次出现。

更新：

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

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

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

首先确定您的结构需要多少列。应始终考虑到列来划分最顶层。
一旦确定了列，将每一列视为一个全宽页面（暂时忽略其他列）并再次划分等等。

简单:-)

【讨论】：

感谢您的回答。它确实使图像重新出现。我的问题更多地涉及彼此相邻的列的对齐方式，以及为什么它们经常会重叠。我的理解是，有 12 个水平列可供使用，只要特定分辨率下顶层的总列数最终为 12，我就可以用行和列结构细分空间。这不是我的实验案例。 12 列只能在一个单行元素中正确布局。更多的行层会导致布局问题。
请查看我更新的答案。我认为它回答了你的问题。
谢谢尼基尔！这正是我所追求的直觉——现在它更有意义了:)

【解决方案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 列，我就可以有尽可能多的行/列细分层来帮助构建布局屏幕上。但是，情况并非如此，而且这些列似乎需要全部组合在一个单一的顶级行中才能正常运行——根据我的实验。

【讨论】：

请查看我更新的答案。我认为它回答了你的问题。