bootstrap里根据浏览器的宽度来调整DIV的排列顺序推荐 亲测 原创


  • :
  • 02-23 14:00
  • :
  • 17次
  • :
  • 0条
  • 2赞

简介在bootstrap里,根据不同浏览器的尺寸,来调整网页里div的显示顺序的方法。

bootstrap是一个可以自适应的CSS开发框架,所谓的自适应,就是指可以根据浏览器的尺寸来自动的调整我们的网页里块元素,如div的大小及排序。

比如站长自己最常用的:

<DIV class="row">
    <Div id="Left" class="col-lg-4 col-12"></Div>
    <Div id="Middle" class="col-lg-5 col-12"></Div>
    <Div id="Right" class="col-lg-3 col-12"></Div>
</DIV>

上面的代码,在浏览器的宽度大于992px时,会分为三列来显示,小于992px时,就会显示成一列,但当显示成一列时,顺序还是按照代码里的顺序来显示的,Left第一,Middle第二,Right第三,那么,我们想让它在显示成一列时,把Middle显示到第一,可以吗?当然是可以的。

下面是具体的方法:

//显示为一列时的顺序
#Left {order:2}
#Middle {order:1}
#Right {order:3}
//浏览器宽度大于992px时显示的顺序//
@media (min-width: 992px) {
    #Left {order:1}
    #Middle {order:2}
    #Right {order:3}
}

上面的代码里,min-width的意思是最小宽度,理解起来就是当最小宽度为992px时,也就是浏览器的宽度在大于992它时。

另外还有一种方法,可以少写一些CSS代码,但需要修改HTML里div的顺序:

<DIV class="row">
    <Div id="Middle" class="col-lg-5 col-12"></Div>
    <Div id="Left" class="col-lg-4 col-12"></Div>
    <Div id="Right" class="col-lg-3 col-12"></Div>
</DIV>

我们把HTML里的div写成在显示成一列时的顺序,然后在CSS文件里定义在显示为三列时的顺序:

@media (min-width: 992px) {
    #Left {order:1}
    #Middle {order:2}
    #Right {order:3}
}


您正在找的文章可能是: