bootstrap删除cols之间的垂直间隙

时间:2015-04-24 12:06:27

标签: html css twitter-bootstrap

我们正在使用bootstrap开发新网站,但我们遇到了问题。

基本的HTML代码:

<div class="row">
<div class="col-md-8" style="height: 200px;">
    Yellow
</div>
<div class="col-md-4" style="height: 400px;">
    Red
</div>
<div class="col-md-8" style="height: 200px;">
    Blue
</div>

我们想要的是黄色和蓝色div在左边(它们之间没有间隙)并且在右边有红色div。但在手机上我们希望订单是黄色,红色,蓝色。

网站的xs / sm版本没问题,但是如果你看看lg或md,你会在黄色和蓝色的div之间找到很大的差距。有没有办法消除这种差距?

2 个答案:

答案 0 :(得分:0)

您正在寻找的内容似乎将来会发布(open request here),但是现在您必须add some css通过媒体查询添加条件类。

http://jsbin.com/cefilatudi/1/edit?html,css,output

@media (min-width: 992px) {
  /** Pull right **/
  .pull-right-md {
    float: right;
  }
}

答案 1 :(得分:0)

使用某些颜色的小例子:

http://codepen.io/anon/pen/KpKLMY?editors=110

@media (min-width: 992px) {
  .col-md-4 {
    float: right;
  }
}