css - 如何在 Bootstrap 4 中让 .py-md-6 覆盖 .p-3？

Question

我定义了

.py-md-6 {
  padding-top: 6rem !important;
  padding-bottom: 6rem !important;  
}

我有一个元素 (HAML)

#id.p-3.py-md-6

但是它表明 .p-3 类覆盖了 .py-md-6 类。

我尝试将 .py-md-6 放在 .p-3 之前，但没有成功。我尝试使用 .p-sm-3 代替，但它是用 @media (min-width: 576px) 定义的，并且仍然覆盖 .py-md- 6。

我希望移动设备上的内边距较小(因为屏幕空间不多)，而桌面设备上的内边距较大。

---

我尝试了一个在 CodePly 中有效的答案，但它在本地不起作用。

Answer 1

您应该像填充实用程序一样将填充类包装在断点中。

@media (min-width: 768px) {
    .py-md-6 {
      padding-top: 6rem !important;
      padding-bottom: 6rem !important;  
    }
}

https://www.codeply.com/go/MOw2FO7Rmw