所以我有一个传统的三列布局。左边一栏是工具箱栏,中间一栏是“动态内容”栏,右边一栏是数据汇总栏。
我想要实现的是,一旦出现一些响应,中心列就会位于顶部。这将是网站最重要的部分,因此应该放在最前面。我似乎无法让它与 Bootstrap 一起工作。这是我的布局:
<div class="container">
<!-- Example row of columns -->
<div class="row">
<!-- column: left -->
<div class="col-md-2" id="sidebarleft">left </div>
<!-- column: center-->
<div class="col-md-8" id="main">middle</div>
<!-- column: right -->
<div class="col-md-2" id="sidebarright">right</div>
</div>
</div>
那么我将如何实现这一目标?
谢谢!
最佳答案
这应该可以解决问题。
因此当浏览器使用 Bootstrap 的“md”视口(viewport)时,布局是完整的,但是当浏览器变小时(所以“sm”和“xs") 中间的列在顶部,然后是左右。
<div class="container">
<!-- Example row of columns -->
<div class="row">
<!-- column: center-->
<div class="col-md-8 col-md-push-2" id="main">middle</div>
<!-- column: left -->
<div class="col-md-2 col-md-pull-8" id="sidebarleft">left </div>
<!-- column: right -->
<div class="col-md-2" id="sidebarright">right</div>
</div>
关于css - 响应式设置中间列在顶部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24775390/