Bootstrap 4如何为col内的元素添加边距？答案

【问题标题】：Bootstrap 4 how to add margin to element inside a col?Bootstrap 4如何为col内的元素添加边距？
【发布时间】：2018-07-20 10:36:41
【问题描述】：

我在 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，但没有帮助

【问题讨论】：

标签： html css twitter-bootstrap bootstrap-4

【解决方案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

【讨论】：