Question

在bootstrap 4中，我有以下代码：

<div class="container-fluid">
    <div class="row no-gutter">
        <div class="d-none d-md-flex col-md-12 flex-wrap">      
    <div style="width:100px;height:50px;float:left;display:block;background:red;">Div</div>
    <div style="width:100px;height:50px;float:left;display:block;background:red;">Div</div>
    <div style="width:100px;height:50px;float:left;display:block;background:red;">Div</div>
    <div style="width:100px;height:50px;float:left;display:block;background:red;">Div</div>
    <div style="width:100px;height:50px;float:left;display:block;background:red;">Div</div>
        </div>
    </div>
</div>

问题是，一旦有一个“包装好的物品”，它似乎卡在了上面物品的底部。当我尝试将margin-bottom：5px应用于每个div时，似乎没有任何效果。处理此问题的正确方法是什么？

Answer 1

代码中的几件事...

为什么将float与flex一起使用？ Bootstrap 4使用flex而不是float（bootstrap 3使用过）
粉红色的div来自您的代码，其中的类已删除，以在浏览器/摘录中显示效果
蓝色的div显示使用flex的解决方案（使用bootstrap 4类）
margin-bottom在这两者中均有效

工作片段如下：

.flex-wrap>div {
  width: 100px;
  height: 50px;
  display: block;
}

.my-divs {
  float: left;
  margin-bottom: 10px;
  background: lightpink;
}

.my-flex-div {
  background: lightblue;
  margin-bottom: 5px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">


<div class="container-fluid">
  <div class="row no-gutter">
    <div class=" d-md-flex col-md-12 flex-wrap">
      <div class="my-divs">Div</div>
      <div class="my-divs">Div</div>
      <div class="my-divs">Div</div>
      <div class="my-divs">Div</div>
      <div class="my-divs">Div</div>
    </div>
    <hr/>
    <div class="d-flex flex-wrap">
      <div class="my-flex-div">Div 2</div>
      <div class="my-flex-div">Div 2</div>
      <div class="my-flex-div">Div 2</div>
      <div class="my-flex-div">Div 2</div>
      <div class="my-flex-div">Div 2</div>
    </div>
  </div>
</div>

Answer 2

最可能是您使用float导致了问题。但是，仅使用Bootstrap默认类而不使用其他CSS即可实现整个布局。

首先，如果仅使用col-12全角单列，则无需行/列布局。只需删除row no-gutter和col-12类。

第二，BS4包括用于边距的实用程序类。 Read about them here。

请尝试以下示例。为了清楚起见，我使用了多种背景色。

.flex-wrap div {
  width: 100px;
  height: 50px;
}

<div class="container-fluid">
  <div class="d-flex flex-wrap">
    <div class="mb-5 bg-primary">Div</div>
    <div class="mb-5 bg-secondary">Div</div>
    <div class="mb-5 bg-warning">Div</div>
    <div class="mb-5 bg-success">Div</div>
    <div class="mb-5 bg-danger">Div</div>
  </div>
</div>

Here is a working codepen example.

如何在bootstrap4中的flexbox包装的项目之间增加垂直间距？

2 个答案: