我如何使..py md-6在Bootstrap 4中覆盖.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

基于@ZimSystem的评论，我重新安排了我的应用程序中的link标记，以便引导优先，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' 

然后，我的应用程序定义将覆盖先前的引导程序定义。现在起作用了。

Answer 2

查看一下@媒体屏幕。引导使用它。我认为您可以将所有网格填充更改为6，但移动屏幕除外。如果更适合您的情况，也可以使用singel类

我使用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预编译它

Answer 3

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

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

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