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-class，以便总共得到12个col。

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

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

@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。

Answer 4

对于使用Bootstrap 4的任何人，都添加了此功能：http://v4-alpha.getbootstrap.com/layout/grid/#variable-width-content

<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col-12 col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-12 col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

Answer 5

代码：

<div class="community-images">
<div class="col-md-3 community-margin"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
</div>

css：

@media (min-width: 768px) {
.community-margin{
    margin-left: 12.5%;
}
}

.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;
}

尝试以上代码。你肯定得到一个解决方案。您也可以参考以下链接：https://wordpress.com/post/wpkuldip.wordpress.com/61

bootstrap center 3 col-md-3 div

5 个答案: