我正在使用顶部固定的导航栏进行响应式布局。在下面,我有两列,一列用于侧栏(3),一列用于内容(9)。在桌面上看起来像这样
导航栏 [3] [9]
当我resize将其navbar压缩并隐藏时,侧边栏会堆叠在内容的顶部,如下所示:
resize
navbar
我想要顶部的主要内容,因此我需要将移动设备的顺序更改为此:
导航栏 [9] [3]
如何在移动设备上重新排列这些列?或者,如何将sidbar列表组放入正在扩展的导航栏中?
这是我的代码:
<div class="navbar navbar-inverse navbar-static-top"> <div class="container"> <a href="#" class="navbar-brand">Brand Title</a> <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div class="collapse navbar-collapse navHeaderCollapse"> <ul class="nav navbar-nav navbar-right"><!--original navbar--> <li class="active"><a href="#">Home</a></li> <li><a href="#">FAQ</a></li> </ul> </div> </div> </div><!--End Navbar Div--> <div class="container"> <div class="row"> <div class="col-lg-3"> <div class="list-group"> <a href="#" class="list-group-item"> <h4 class="list-group-item-heading">Lorem ipsum</h4> <p class="list-group-item-text">Lorem Ipsum is simply dummy text.</p></a> </div> </div><!--end sidebar--> <div class="col-lg-9"> <div class="panel panel-default"> <div class="panel-body"> <div class="page-header"> Main Content </div> </div> </div><!--end main content area-->
您不能在较小的屏幕中更改列的顺序,但可以在较大的屏幕中进行更改。
因此,更改列的顺序。
<!--Main Content--> <div class="col-lg-9 col-lg-push-3"> </div> <!--Sidebar--> <div class="col-lg-3 col-lg-pull-9"> </div>
默认情况下,这将首先显示主要内容。
因此,在移动设备中首先显示主要内容。
通过使用col-lg-push和,col-lg-pull我们可以在大屏幕中对列进行重新排序,并在左侧显示侧栏,在右侧显示主要内容。
col-lg-push
col-lg-pull