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

概述我试图熟悉Bootstrap和Grid.我正在尝试创建以下宏布局： ===================================================| PageTitle |________________________||________________________| +1 |________| img| img|| Make a c 我试图熟悉bootstrap和GrID.我正在尝试创建以下宏布局：

@H_502_8@

@H_502_8@

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

主要元素是一个jumbotron,其中有一排.然后我将行拆分为两个< div> class =“col-xs-12”的元素(我希望左面板在移动设备上保持在右上方).@H_502_8@

左侧面板进一步分为两行,其中包含一些文本内容.@H_502_8@

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

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

正如您将看到的那样,布局的行为与我期望的xs大小(低于768px)相同.但是,在较大的尺寸中,右面板中的行和列彼此重叠,并且图像已消失.@H_502_8@

理解为什么网格没有像我期望的那样运行的任何指导(即作为在不同屏幕尺寸下智能地回流的表格),将不胜感激！@H_502_8@解决方法 小型设备右侧面板上的网格结构似乎是错误的.

@H_502_8@

在Jsfiddle的代码片段中.在第17和32行,将class =“col-xs-6 col-sm-3”改为class =“col-xs-6 col-sm-6”.@H_502_8@

这会使图像再次出现.@H_502_8@

更新：@H_502_8@

当然,你可以,你只需要改变你构建的方法,任何结构都是可能的.检查this Fiddle.它以简单易懂的方式显示列结构下的行和行下的列.@H_502_8@

在您的情况下,您需要做的是在最顶层将您的结构划分为4列,并在每列中执行您想要的任何 *** 作.@H_502_8@

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

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

简单:-)@H_502_8@ 总结

以上是内存溢出为你收集整理的html – Bootstrap 3.3.6网格边界不提供刚性结构全部内容，希望文章能够帮你解决html – Bootstrap 3.3.6网格边界不提供刚性结构所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。