我已经在 Twitter Bootstrap 的几个元素中使用了网格系统 - 但似乎无法解决这个问题。
我想在网格的右上角放置一个蓝色的促销单元,如下所示:
示例代码
<div class="row">
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">1</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">2</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">3</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 big">Promotion</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">4</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">5</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">6</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">7</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">8</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">9</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">10</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">11</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">12</div>
</div>
Playground :http://jsfiddle.net/3fr3rsL3/
任何帮助都很感激
最佳答案
这里使用的是Bootstrap的push
和pull
ordering classes :
<强> Demo
...
<div class="col-xs-12 col-sm-4 col-md-3 col-md-push-3 col-lg-2 col-lg-push-6 big">
<div>3</div>
</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-md-pull-3 col-lg-2 col-lg-pull-2">
<div>4</div>
</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-lg-pull-2">
<div>5</div>
</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-lg-pull-2">
<div>6</div>
</div>
...
强制所有尺寸的列 float 可以解决移动设备的重叠问题:
.big {
float: left;
}
关于css - 对于所有断点,在网格的右上角保留一列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33761624/