Css 如何在引导程序4中使.py-md-6覆盖.p-3？

我定义

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

我有一个元素（HAML）

但是，它显示

.p-3

类覆盖

.py-md-6

类

我试着把

.py-md-6

放在

.p-3

之前，但没有成功。我尝试改用

.p-sm-3

，但它是用

@介质（最小宽度：576px）

定义的，仍然覆盖

.py-md-6

我想要手机上的小填充（因为屏幕空间不多），桌面上的大填充

---

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

---

在媒体屏幕上签出。Bootstrap使用它。我想你可以把所有的网格填充改为6，除了手机屏幕。或者一个单独的课程，如果它更适合你的情况

我使用sass来预编译样式，但这也可以用旧的方式来完成。在您自己的样式表中：

my-padding-class{
padding-top: 6rem;
padding-bottom: 6rem;
}
/*Small devices (landscape phones, 576px and up)*/
@media (max-width: 576px) {
    my-padding-class{
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
}

但是！你希望它是一般的吗？对于所有网格列？然后你不应该定义你自己的类，因为你不想一次又一次地添加它

---

那你真的应该调查一下Sass。我使用webpack2对其进行预编译

您应该像padding utils那样将padding类包装在断点中

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

---

根据@ZimSystem的评论，我在我的应用程序中重新安排了

链接

标记，使引导程序排在第一位，我的

应用程序.css

排在第二位。从

= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' 
= javascript_include_tag 'application', 'data-turbolinks-track': 'reload'
%link{:crossorigin => "anonymous", :href => "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css", :integrity => "sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ", :rel => "stylesheet"}/

到

---

然后我的应用程序定义将覆盖以前的引导定义。现在它开始工作了

尝试使用style属性为元素编写内联样式。我认为内联样式获得最大优先级。@VidiyaPrasanth，这似乎不起作用<代码>。它不会在检查器中显示元素样式。似乎不可能对内联样式使用媒体查询。因为某种原因，这不起作用。请参阅更新问题中的屏幕截图。基本上，它是一个似乎不起作用的截图的副本。用屏幕截图检查更新的问题。更新主要答案

= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' 
= javascript_include_tag 'application', 'data-turbolinks-track': 'reload'
%link{:crossorigin => "anonymous", :href => "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css", :integrity => "sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ", :rel => "stylesheet"}/

%link{:crossorigin => "anonymous", :href => "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css", :integrity => "sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ", :rel => "stylesheet"}/
= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload'