标签:col pull

Bootstrap3优先移动设备,相关页面元素,如div等在页面缩小后,会变成列堆叠,自然就产生了哪些元素显示在前面,哪些元素显示在后面的问题。

问题依旧来自于做图书馆的网站,在某浏览具体内容的页面中,页面二八开,左边是分类导航之类的东西,右边是内容,当用户通过移动设备访问时,理所当然的是希望看到内容,而不是分类导航,那么该怎么样使得在手持设备上,内容可以先于分类导航显示呢?

======残忍的分割线======

当然,可以以一种残忍的做法,使用“hidden-xs”之类的属性隐藏左边的分类导航。

======结束残忍的分割线=====

草草google了一下,尚无明确的页面,于是看官网,有提到“通过使用.col-md-push-* 和 .col-md-pull-*就可以很容易的改变列的顺序”,下面还有个简单的例子,咋一看不是很明白,于是测试了下,最终确定了用法,确实可以解决碰到的问题。

简单来说,col-??-push-*和col-??-pull-*,主要起改变元素在大屏幕页面上的显示位置的作用,对于手持设备的小屏幕显示(也就是堆叠的列的顺序或者说位置),会严格按照html代码的先后顺序显示,那么我们自然就知道用法了:在html里面,把要先显示的内容写在前面,后显示的内容写在后面,然后用push和pull对它们在大屏幕上的左右位置进行调整,例子如下:

<div class=’col-12 col-sm-9 col-sm-push-3′>//这个div占了9个栅格,先写,让它在手持设备上可以先显示,然后用push往右推3个栅格,让它在大屏幕显示在右边。

<div class=’col-6 col-sm-3 col-sm-pull-9′> //这个div占了3个栅格,后写,让它在手持设备上后显示,然后用ull往左拉9个栅格,让它在大屏幕显示在左边。

就这么简单。