嘿，我之前处理过几乎一模一样的场景，问题的根源其实和Bootstrap关系不大，是CSS行内元素的特性在搞鬼——span默认是行内元素，这类元素的垂直方向margin（margin-top/margin-bottom）是不会生效的，所以你加了margin-top也没效果。

给你几个简单有效的解决办法：

方法1：自定义CSS修改元素显示类型 #

给你的myClass类加上display: inline-block;，让元素变成行内块级元素，这样垂直margin就能正常起作用了：

.myClass {
  padding: 8px; /* 你原来的内边距 */
  display: inline-block; /* 关键：切换为行内块 */
  margin-top: 10px; /* 现在这个margin-top会生效了 */
}

行内块元素既保留了行内元素可以并排的特性，又支持块级元素的margin、padding等属性，完美适配你的场景。

方法2：用Bootstrap内置类（更推荐） #

Bootstrap 4提供了现成的工具类，不用写自定义CSS就能搞定：

• d-inline-block：把元素设置为行内块
• mt-*系列类：比如mt-2（对应margin-top: 0.5rem）、mt-3（对应margin-top: 1rem），根据需要选合适的间距大小

示例HTML代码：

<div class="col">
  <span class="myClass d-inline-block mt-2">元素1</span>
  <span class="myClass d-inline-block mt-2">元素2</span>
  <!-- 更多span元素 -->
</div>

这种方式更符合Bootstrap的设计理念，减少自定义样式的维护成本。

额外提示 #

如果你的myClass padding设置得比较大，还可以调整line-height来辅助优化行间距，但核心解决办法还是让元素支持垂直margin——也就是切换到行内块或块级元素。

内容的提问来源于stack exchange，提问作者woshitom