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;
}

由于第一个col中有多个span元素，因此正在创建一个新行。我的问题是因为填充，我在第一行的跨度和第二行的跨度之间有一些叠加：

我试图在myClass中添加一些margin-top，但它没有帮助

Answer 1

span没有保证金，因为它是inline元素。

您可以像这样修复CSS：

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

或者，您可以使用Bootstrap 4 utility classes并避免额外的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