bootstrap center 3 col-md-3 divs [英] bootstrap center 3 col-md-3 divs

问题描述

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

I have a wrapper like so: <div class="community-images"></div>

，在此包装中，我有3个col-md-3 divs：

and inside this wrapper I have 3 col-md-3 divs:

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

我要做的是将这3个div置于包装器的中央，我将如何实现呢？

what I am trying to do is center these 3 divs inside the wrapper, how would I accomplish this ?

以下是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;
}

推荐答案

更新：本是正常布局的好解决方案，不适用于Twitter Bootstrap，因为它会破坏Bootstrap的行为。查看Jeben的答案以获得更好的布局。

一种现代的浏览器解决方案，很适合您的问题。具有合理内容的Flexbox技术。

A modern browsers solution and apt for your problem. Flexbox technique with justified content.

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

引导

这篇关于bootstrap center 3 col-md-3 divs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！