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

Question

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

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

主要元素是一个jumbotron,其中有一排.然后我将行分成两个<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列,并在每列中执行您想要的任何操作.

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

• 首先确定您的结构需要多少列.最重要的应该始终考虑到列.

• 确定列后,将每列视为全宽页面(暂时忽略其他列)并再次划分,依此类推.

简单:-)