CSS - Bootstrap 居中 col-md-3 并产生奇怪的结果答案

【问题标题】：CSS - Bootstrap centering col-md-3 with weird resultsCSS - Bootstrap 居中 col-md-3 并产生奇怪的结果
【发布时间】：2015-08-31 01:14:45
【问题描述】：

我在包装器中有一个问题中心 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> 一样，它可以工作，但它会在我的col-md-3 上占用我的margin-right：10px，这里是center-block 的CSS：

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

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

【问题讨论】：

寻求调试帮助的问题（“为什么这段代码不起作用？”）必须在问题本身中包含所需的行为、特定问题或错误以及重现它所需的最短代码。见How to create a Minimal, Complete, and Verifiable example
我们需要查看 HTML 来回答。听起来您没有在 <div class="row"></div> 包装器中对元素进行分组..
我建议你不要同时使用 bootstrap grid 和 flex

标签： css twitter-bootstrap

【解决方案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>  </div>

另外，如果你想要每行 3 个，我建议使用 col-md-4，因为如果你想要这样做，这将使事情更容易居中。

【讨论】：