我在 Bootstrap 中使用 3 列布局,右侧有导航、内容和小部件,但是当屏幕处于移动 View 时,我希望布局按如下方式堆叠;导航小部件,然后是内容,请指教。
查看所需桌面和移动布局顺序的图像:
最佳答案
按照移动设备所需的顺序放置 block 。然后向右拉“widget”:
<div class="container">
<div class="row">
<div class="span3 custom-nav"></div>
<div class="span3 custom-widget pull-right"></div>
<div class="span6 custom-content"></div>
</div>
</div>
在移动设备上时,重置 float :
@media (max-width: 767px) {
[class*="span"].pull-right {
float: none;
}
}
还有一些事情:
- 我在这里使用
custom
前缀,以免遇到 Bootstrap 的预定义.nav
和.content
类。 - 查看它在 the fiddle 上的工作原理.
- 检查the related question我已经回答了。
- 欢迎使用 StackOverflow。
关于css - Bootstrap 三列布局堆叠问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12838293/