Question

我有这个：http://www.bootply.com/apUgehnGLq

为什么红盒的宽度如此之大？我希望它在最后一个框之后立即完成，这是一个带有标签CCC的盒子，然后将整个红色框居中。

Answer 1

边框会在框的宽度上添加像素，因此最后一个框会换行。您可以在box-sizing: border-box;上设置body，在.border上设置填充而不是边距，以达到您想要的效果。

我更新了您的代码：http://www.bootply.com/1s5ESfKlod

详细了解box-sizing属性在Mozilla Developer Network可以执行的操作。

更新

请参阅此处的代码：http://www.bootply.com/ASWCuTHrZy

您可以使用flex-basis来控制此示例中的项目，其中X项目 3 。

  flex-basis: calc(100% * 1/3);

因此100除以1/3使得33.333 ..％，这是AAA，BBB，CCC容器的宽度。 DDD将转到下一行。

全部使用CSS：

body * {
  box-sizing: border-box;
}

.border {
    padding: 5px;
    border: 2px solid black;
  }


#inner {
  border: 2px solid red;
  width: 80%;
}

.container-fluid { 
    display: flex;
    flex-flow: row wrap;
    align-content: flex-start;
  }

.border {
  flex-basis: calc(100% * 1/3);
}

Answer 2

由于您在内部div中使用％，因此您必须使百分比更大并且div更小，直到您拥有自己喜欢的大小，如下所示： http://www.bootply.com/juFV1xgpNY

只需使用.inner的内容和内部的div来玩。

Answer 3

您在4列中没有排列的问题是由于您在.border类中设置的余量，以及#inner id的类。因此，如果您删除边界边距，我们应该能够解决所有问题。像这样：

<div id="center" class="col-lg-7">
  <div class="col-md-4 border">AAA</div>
  <div class="col-md-4 border">BBB</div>
  <div class="col-md-4 border">CCC</div>
  <div class="clearfix"></div>
  <div class="col-md-12 border">DDD</div>
</div>

或者，如果您希望将所有4列排成一行，您可以像这样编写代码：

<div id="center" class="col-lg-7">
  <div class="col-md-3 border">AAA</div>
  <div class="col-md-3 border">BBB</div>
  <div class="col-md-3 border">CCC</div>
  <div class="col-md-3 border">DDD</div>
</div>

您可以在此处查看示例代码：http://www.bootply.com/GZJwteX6yT

我希望这可以帮到你！

Bootstrap - 中心内部div

3 个答案: