Bootstrap 4如何在col内添加元素的边距？

Question

我有一些在列内的元素：

<div class="container-fluid">
  <div class="row">
    <div class="col">
        <span class="myClass">some text</span>
        <span class="myClass">some text</span>
    </div>
    <div class="col"></div>
  </div>
</div>

myClass元素有一些填充：

.myClass{
  background: #ecedea;
  padding: 10px 10px;
  margin-right: 20px;
}

由于第一列中有多个span元素，所以会创建一个新行。 我的问题是由于填充，在第一行中我的span之间有一些重叠和第二行中的span：

我尝试给myClass添加一些margin-top，但没有起到帮助作用。

- woshitom

Answer 1

span元素没有边距，因为它是一个inline元素。

你可以通过以下方式修复CSS：

.myClass{
  background: #ecedea;
  padding: 10px 10px;
  display: inline-block;
  margin-right: 20px;
}

或者，您可以使用Bootstrap 4 实用类，避免额外的CSS：

<div class="container-fluid">
  <div class="row">
    <div class="col">
        <span class="bg-light d-inline-block p-2 mr-3">some text</span>
        <span class="bg-light d-inline-block p-2 mr-3">some text</span>
    </div>
  </div>
</div>

演示：https://www.codeply.com/go/jKCFqBb92J

- Zim