如何让 .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 class 覆盖 .py-md-6 class。

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

我想要移动设备上的小填充（因为屏幕不多 space），我想要桌面上的大填充。

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

Answer 1

查看@media 屏幕。 Bootstrap 使用它。我认为您可以将除移动屏幕之外的所有网格填充更改为 6。或者单曲 Class 如果它更适合你的情况

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

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

那你真的应该看看 Sass。我使用webpack2预编译它

Answer 2

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

@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 定义。现在它起作用了。

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

How do I make .py-md-6 override .p-3 in Bootstrap 4?

css

twitter-bootstrap

bootstrap-4

twitter-bootstrap-4