我有一个问题,有时 .col-sm-8
没有足够的元素和 .col-sm-4
落在左边。 col-sm-4
列就像侧边栏,内容 col-sm-8
同时可能是空的。
如何像图片中那样定位它们并且仍然能够在调整大小时使用 Bootstrap 列魔术?
不幸的是,我不能使用 row,因为 div 的顺序是:
<div class='col-sm-4'>
<div class='col-sm-8'>
<div class='col-sm-4'>
<div class='col-sm-4'>
最佳答案
运行代码片段整页以查看 8 到 4 布局。
.border {
border: .125em solid;
height: 200px;
}
.invisible {
visibility: hidden;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="col-xs-12 col-sm-4 pull-right border">SM 4</div>
<div class='col-xs-12 col-sm-8 border'>SM 8</div>
</div>
<div class="col-xs-12">
<div class="col-sm-8 invisible"></div>
<div class="col-xs-12 col-sm-4 border">SM 4</div>
</div>
<div class="col-xs-12">
<div class="col-sm-8 invisible"></div>
<div class="col-xs-12 col-sm-4 border">SM 4</div>
</div>
</div>
</div>
关于css - 如何在右侧放置列列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35740689/