在Bootstrap 4中添加多个类的正确方法是什么？

Question

我正在使用Bootstrap 4构建一个新模板并使用Sass进行编译。我有.socialgraph-gadget，我想要display: flex和justify-content: space-between。

我应该这样做：

<div class="socialgraph-gadget d-flex justify-content-between">
  <!-- awesome content -->
</div>

或删除flex实用程序类并将其添加到.socialgraph-gadget：

.socialgraph-gadget
{
  text-align: center;
  display: flex;
  justify-content: space-between;
}

或者是否有一些更好的第三种选择我错过了：

.socialgraph-gadget
{
  text-align: center;
  @extend .d-flex;
  @extend .justify-content-between;
}

这是一个我一直在使用Bootstrap 4进行​​大量讨论的问题。有很多实用程序类我无法决定是否更好地添加它们（组合）或在其中定义它们类（配置）。如果我去编写组合路线，我最终会有这么多课程，它真的搞砸了HTML。如果我进入配置路线，我觉得我在我的css文件中添加了不必要的膨胀。

这里的经验法则或最佳做法是什么？谢谢。对不起，如果这是转贴。

Answer 1

我会说第一个选项看起来最好。如果您想创建一种更短的方法，可以在自己的styles.css文件中创建自定义类。

使用帮助程序类（如Bootstrap提供的那种）的原因是它们可能会使HTML混乱，但这种情况很多时候都会发生，你不必过于担心它。优点是，您可以在需要时快速删除这些内容，而不必重写CSS，从而节省时间。