如何在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屏幕。 Bootstrap使用它。我认为你可以将所有网格填充更改为6，除了移动屏幕。或者是一个单一的IF类它可以更好地适应您的情况

我使用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;
    }
}

BUT！你想要它一般吗？对于所有网格列？那么你不应该定义自己的类，因为你不想一遍又一遍地添加它。

然后你应该真正研究Sass。我使用webpack2来预编译它

Answer 2

You should wrap the padding class in a breakpoint just like the padding utils do..

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

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

Answer 3

根据@ZimSystem的评论，我在我的应用程序中重新安排了link标签，以便Bootstrap首先出现，application.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"}/

要

%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' 

然后我的应用定义将覆盖早期的Bootstrap定义。现在它有效。