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

尼古拉斯·约翰16

我正在使用Bootstrap 4构建新模板,并使用Sass对其进行编译。我有.socialgraph-gadget,我希望display: flexjustify-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;
}

还是我缺少一些更好的Sass-y第三选择,例如:

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

这是我在Bootstrap 4中经常遇到的一个问题。有太多的实用程序类,我无法决定是否最好将它们添加到(组成)或在类中定义(配置)。如果我走合成路线,最终会遇到很多类,这实际上会使html变得混乱。如果我走配置路线,那感觉就像是在给我的css文件添加不必要的膨胀。

经验法则或最佳做法是什么?谢谢。抱歉,如果这是转发。

克雷格

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

使用帮助程序类(例如Bootstrap提供的那种)的事情是,它们可能会使您的HTML变得混乱,但是这种情况经常发生,因此您不必为此担心太多。这样做的好处是,您可以在需要它们时快速放入它们,而不必重写CSS,从而节省了时间。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章