bootstrap center 3 col-md-3 divs

Question

我有一个这样的包装: <div class="community-images"></div>

在这个包装器里面我有3个col-md-3 div:

<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>

我想要做的是将这三个div放在包装器中,我将如何实现这一目标？

这是CSS:

.community-images {
  padding: 40px 0px 40px 0px;
}

.col-md-3 {
  border: 1px solid #ccc;
  padding: 10px;
  margin: 10px;
  min-height: 300px;
  box-shadow: 10px 10px 5px #888888;
}

Answer 1

更新:这是正常布局的好解决方案,而不是Twitter Bootstrap,因为它会破坏Bootstrap行为.检查Jeben的答案以获得更好的布局.

一个现代的浏览器解决方案,适合您的问题.具有合理内容的Flexbox技术.

@media (min-width:992px) {
  .community-images {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
}

Bootply

Answer 2

有col-md-offset类.不幸的是,你需要col-md-offset-1-half类才能总计12个cols.

我说的是1.5 + 3 + 3 + 3 + 1.5 = 12

所以你可以写自己的类来抵消col.像这样的Smth.

@media (min-width: 992px) {
    .col-md-offset-1-and-half {
        margin-left: 12.499999995%; // col-md-offset-1 has 8.33333333
        // so you multiply 8.33333333 * 1.5 = 12.499999995%
    }
}

<div class="col-md-3 col-md-offset-1-and-half"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>

Answer 3

如同yuyokk建议的那样,将引导列作为浮动(并且具有响应性)元素的中心需要对边距进行一些处理.

或者您可以释放元素并使用内联块:

.community-images {
  text-align: center;
}

.col-md-3 {
  float: none;
  display: inline-block;
  text-align: left; //reset the text alignement to left
}

无处不在,包括IE8.