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

Question

我在col中有一些span元素：

<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元素，因此将创建新行。我的问题是由于填充，我在第一行的跨度和第二行的跨度之间有一些重叠：

我试图在myClass上添加一些页边距，但这没有帮助

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