具有不同断点的填充样式不能与bootstrap css一起使用

Question

在bootstrap 4.0中有填充和边距样式。但是这两种风格都不适用于不同的断点，没有其他风格可以覆盖填充。任何人都可以建议我做错了。

CSS

   .p-sm-4 {padding: 1.5rem 1.5rem !important;}
   .p-md-4 {padding: 1.5rem 1.5rem !important;}

我的HTML是：

<li class="menu-search p-sm-4 p-md-4">
       <input placeholder="Search" class="menu-search form-control round" type="text">
</li>

Answer 1

您是否使用过媒体查询？

 @media only screen and (max-width : 992px) {
 .p-md-4 {padding: 1.5rem 1.5rem !important;}
}
   /* Small Devices, Tablets */
   @media only screen and (max-width : 768px) {
  .p-sm-4 {padding: 1.5rem 1.5rem !important;}
}