Question

我在包装器中有一个问题中心col-md-3 divs。当我有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％，其中包含了对齐内容：center;并显示：像忽略宽度一样弯曲，所以它们都在一行中。

如果我.center-block使用col-md-3，那么<div class="col-md-3 center-block"></div>就可以了，但它会带走我的边距：我的col-md-3上10px，这是CSS对于中心区块：

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

但它会消除每个col-md-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>  </div>

另外，如果你想要每行3个，我会建议你使用col-md-4，因为如果这就是你想要的东西，这将使事情更容易集中。

CSS - Bootstrap以col-md-3为中心，结果很奇怪

1 个答案: