我试图熟悉Bootstrap和Grid.我正在尝试创建以下宏布局:
===================================================
| PageTitle |________________________|
|________________________| +1 |________| img| img|
| Make a choice. |_____|________|____|____|
| | |
===================================================
主要元素是一个jumbotron,其中有一排.然后我将行分成两个<div>元素class="col-xs-12"(我希望左面板在移动设备上保持在右上方).
左侧面板进一步分为两行,其中包含一些文本内容.
右侧面板包含一行,再次分为两个部分.左右两部分都是class="col-xs-12 col-sm-3".这是为了确保在较小的屏幕上,它们各自一个在另一个上面,并填充整个水平空间.如图所示,行和另一列子结构分割空间.
这是我到目前为止的代码:链接
正如您将看到的那样,布局的行为与我期望的xs大小(低于768px)相同.但是,在较大的尺寸中,右面板中的行和列彼此重叠,并且图像已消失.
理解为什么网格没有像我期望的那样运行的任何指导(即作为在不同屏幕尺寸下智能地回流的表格),将不胜感激!