CSS -引导带居中-md-3有奇怪的结果

Question

我在一个包装纸里有一个问题中心-md-3。当我有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;
}

结果很好！但是，当我有一个宽度为25%的11孔md-3时，它的全部被塞进一行，忽略宽度，如果它们是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%的宽度，有对齐内容: center；并显示:弯曲它就像忽略宽度一样，所以它们都排在一排。

如果我将.center-block与我的col-md-3 (如so <div class="col-md-3 center-block"></div> )一起使用，它可以工作，但它会去掉我的边距-右:10 it在cd-md-3上，下面是中间块的CSS：

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

但是，它去掉了每个col 3之间的间距。

Answer 1

您必须将col- div分隔到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，因为如果您想要这样做的话，这将使事情更容易以中心为中心。