我正在使用 Bootstrap 3。 在大屏幕上,我想在左侧有一个侧边栏,在右侧有一个主要内容。在小屏幕上,我希望侧边栏的重要 block 位于顶部,然后是主要内容,然后是侧边栏中不太重要的 block 。有办法实现吗?
这是一个显示问题的 JS Bin:http://jsbin.com/wibucopi/1/下面是当前代码(然而,它在小屏幕上显示所有侧边栏内容)。
<div class="container-fluid">
<div class="row">
<div class="col-sm-3">
<div class="upper" style="background:red">
<h3>I want to be <b>above</b> the main content on small screens!</h3>
</div>
<div class="lower" style="background:green">
<h3>I want to be <b>below</b> the main content on small screens!</h3>
</div>
</div>
<div class="col-sm-9">
<h1>Main content</h1>
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
我已经尝试过 col-sm-pull/push-x
,但我只能实现 whole 侧边栏显示在主要内容下方的小尺寸屏幕。
我不想复制内容并用visible-XY
、hidden-XY
显示/隐藏它,因为页面会变大而且感觉不对.
最好有一个纯 Bootstrap css 解决方案,或者至少只有一个 css(我不想使用 js)。
最佳答案
你可以这样做:
Bootply Demo
HTML:
<div class="container-fluid">
<div class="row">
<div class="upper col-sm-3" style="background:red">
<h3>I want to be <b>above</b> the main content on small screens!</h3>
</div>
<div class="col-sm-9 col-sm-pull-right">
<h1>Main content</h1>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="lower col-sm-3" style="background:green">
<h3>I want to be <b>below</b> the main content on small screens!</h3>
</div>
</div>
</div>
CSS:
@media (min-width: 768px) {
.col-sm-pull-right {
float: right;
}
}
.lower {
clear: left;
}
关于css - Bootstrap 中有没有办法在小屏幕上将一列设置为 "split"?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24990775/