[英]bootstrap layout markup for right sidebar
This is what I want to achieve : http://i.imgur.com/n91OYWN.png 这就是我想要实现的: http : //i.imgur.com/n91OYWN.png
How can I construct the above layout using bootstrap? 如何使用引导程序构造上述布局? The left part (2 col) and the right has 1 col, I color them so you can see. 左边的部分(2列),右边的部分为1列,我给它们上色,以便您看到。
The problem is this is not a static site. 问题是这不是一个静态站点。 So here's the take for the markup 所以这是加价的要点
<div class="row">
<div class="col-lg-4">
white
</div>
<div class="col-lg-4">
white
</div>
<div class="col-lg-4">
orange
</div>
</div>
<div class="row">
<div class="col-lg-4">
white
</div>
<div class="col-lg-4">
white
</div>
<div class="col-lg-4">
orange
</div>
</div>
the orange and the white will mix up in mobile and above markup is hard to maintain because I have to loop using php to display the content for the white box. 橙色和白色将在移动设备中混合在一起,并且上面的标记很难维护,因为我必须循环使用php来显示白色框的内容。
Instead of using many rows
, Use one row
which contains three children divs
. 与其使用很多rows
, divs
使用包含三个子divs
row
。
<div class="row">
<div class="col1 col-lg-4" id="left">
<div>White 1</div>
<div>White 1</div>
<div>White 1</div>
<div>White 1</div>
</div>
<div class="col2 col-lg-4" id="middle">
<div>White 2</div>
<div>White 2</div>
<div>White 2</div>
<div>White 2</div>
</div>
<div class="col3 col-lg-4" id="right">
<div>Orange</div>
<div>Orange</div>
</div>
</div>
The children divs
( White 1
, White 2
and Orange
) may be dynamically generated, and insert them correctly to the targets ( #left
, #middle
, #right
) by code (either PHP or JS). 子divs
( White 1
, White 2
和Orange
)可以动态生成,并通过代码(PHP或JS)将它们正确插入目标( #left
, #middle
, #right
)。
This is very easy to do with the push and pull classes that come with bootstrap 3. 这很容易通过bootstrap 3附带的push和pull类来完成。
This will have orange on top on small viewports (under the col-lg- class) and will be on the right when it's at that min-width or larger. 在最小视口(在col-lg-类之下)上,该图标的顶部将显示橙色,而在最小宽度或更大的最小视口上,该图标将显示在右侧。
<div class="container">
<div class="row">
<div class="col-lg-4 col-lg-push-8">
<div class="box orange"></div>
<div class="box orange"></div>
</div>
<div class="col-lg-8 col-lg-pull-4">
<div class="row">
<div class="col-lg-6">
<div class="box"></div>
</div>
<div class="col-lg-6">
<div class="box"></div>
</div>
<div class="col-lg-6">
<div class="box"></div>
</div>
<div class="col-lg-6">
<div class="box"></div>
</div>
<div class="col-lg-6">
<div class="box"></div>
</div>
<div class="col-lg-6">
<div class="box"></div>
</div>
<div class="col-lg-6">
<div class="box"></div>
</div>
<div class="col-lg-6">
<div class="box"></div>
</div>
</div>
</div>
</div>
</div>
DEMO CSS ONLY: 仅演示CSS:
.box {width:100%;height:300px;margin-bottom:30px;border:5px solid #000}
.orange {background:orange}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.