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

【问题标题】：How do I make .py-md-6 override .p-3 in Bootstrap 4?如何在 Bootstrap 4 中让 .py-md-6 覆盖 .p-3？
【发布时间】：2018-01-12 21:57:59
【问题描述】：

我定义了

.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 中有效的答案之一，但它在本地无效。

【问题讨论】：

尝试使用 style 属性为元素编写内联样式。我认为内联样式获得最高优先级。
@VidiyaPrasanth 这似乎不起作用。 <div class="p-3" id="deal-flow" style="@media (min-width: 768px) { padding-top: 6rem !important; padding-bottom: 6rem !important; }">。它不会在检查器中显示元素样式。似乎不可能对内联样式使用媒体查询。 stackoverflow.com/questions/13023157/…

标签： css twitter-bootstrap bootstrap-4 twitter-bootstrap-4

【解决方案1】：

查看@media 屏幕。 Bootstrap 使用它。我认为您可以将除移动屏幕之外的所有网格填充更改为 6。或者一个单独的 Class 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;
    }
}

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

那么你应该真正研究一下 Sass。我使用 webpack2 预编译它

【讨论】：

这似乎不起作用。使用屏幕截图检查更新的问题。
更新主要答案

【解决方案2】：

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

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

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

【讨论】：

由于某种原因，这不起作用。请参阅更新问题中的屏幕截图。
基本上是stackoverflow.com/questions/44025566/bootstrap-4-spacing-bug/…的副本

【解决方案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 定义。现在它可以工作了。

【讨论】：