異なるブレークポイントを持つパディングスタイルがブートストラップcssで動作しない

Question

ブートストラップ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;} 
}