CSS - Bootstrap 居中 col-md-3，结果奇怪

Question

我在包装器中有一个问题中心 col-md-3 div。当我有 3 个 col-md-3 并在我的包装器中使用此代码时:

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

结果很好!但是当我有 11 个 col-md-3，每个宽度为 25% 时，它全部挤成一排并忽略宽度，如果它们每个为 25%，我希望每行有 3 个，而不是全部一个。我能解决这个问题吗？

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

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

我期望的是将这些 div 居中，它们的宽度各为 25%，并带有 justify-content: center;和 display: flex 它就像忽略宽度一样，所以它们都在一行中。

如果我使用 .center-block和我的 col-md-3像这样<div class="col-md-3 center-block"></div>它有效，但它带走了我的 margin-right: 10px 在我的 col-md-3 上，这里是 center-block 的 CSS:

.center-block {
  display: inline-block;
  margin-left: auto !important;
  margin-right: auto !important;
}

但它消除了每个 col-md-3 之间的间距

Answer 1

您必须将 col- 分开分成 rows为了让它们正常工作:(也记得关闭你的div)

<div class="wrapper"> <div class="row"> <div class="col-md-3"></div> <div class="col-md-3"></div> <div class="col-md-3"></div> </div> <div class="row"> <div class="col-md-3"></div> <div class="col-md-3"></div> <div class="col-md-3"></div> </div> <div class="row"> <div class="col-md-3"></div> <div class="col-md-3"></div> <div class="col-md-3"></div> </div> <!-- etc. --> </div>

此外，如果您希望每行 3 个，我建议使用 col-md-4 ，因为如果这是您想要的，这将使事情更容易居中。