BootStrap列排序

情境引入

假设一张页面的左部分有一个col-md-8的栏目,右侧有一个col-md-4的侧边栏。在响应式布局时,常常需要将侧边栏放置在col-md-8的上方,于是就可以引出下列代码:

<div class="col-md-4"></div>
<div class="col-md-8"></div>

但是,由此将会导致一个问题:在正常显示时col-md-4的侧边栏将在col-md-8的左侧!

问题解决

为了解决这一问题,BootStrap提供了push和pull两种列排序的方式。那col-md来说,将一个col向右移动称为col-md-push-,向左移动称为col-md-pull-:

<div class="col-md-4 col-md-push-8">.col-md-4</div>
<div class="col-md-8 col-md-pull-4">.col-md-8</div>

最终效果

正常时

响应式

将最新的文章发送到你的邮箱

展示评论