Question

有什么更好的？：编写自己的CSS来为网站的组件提供填充和边距，还是使用Bootstrap 4的间距帮助器？

例如。 选项A ：

<div class="header-item">
    <a href="contact">
        <div class="item-info">
            <img class="img-icon" src="help.svg" alt="Contact">

        </div>
        <div class="header-item-txt">
            <div><strong>Contact</strong></div>
            <div class="sub-txt">+36 343 434 343</div>
        </div>
    </a>
</div>

选项A 中的.header-item类的样式：

.header-item {
    padding: 2rem 1rem;
    font-size: 18px;
    position: relative;
    cursor: pointer;
}

或选项B 。从CSS删除填充样式，并使用引导助手：

<div class="header-item px-1 pt-2 pb-2">
 ... content
</div>

和选项B 中的CSS：

.header-item {
    font-size: 18px;
    position: relative;
    cursor: pointer;
}

什么是最好的方法？

Answer 1

如果您将引导程序安装到站点上，则使用其声明的最佳方式。

为什么？

可能您将不得不使用!important覆盖无效的引导程序

when using !important is right choice

Answer 2

IMO，因为bootstrap文件已经加载，最好使用引导程序编写的预定义类。

因此，在您的示例中，我认为使用 Option B 的效果要比自己编写一个新类并等待其加载好。

<div class="header-item px-1 pt-2 pb-2">
 ... content
</div>

用Bootstrap 4优化CSS的最佳方法是什么？

2 个答案: