Html 为移动浏览器添加不同版本的类

我正在编辑Wordpress主题，并在Bootstrap的

中添加了一个内容框。我不得不删除内容框的

填充底部

和

空白底部

，因为在桌面上，内容框显示后，内容框中有很多空间。虽然删除填充和边距在桌面上效果很好，但在移动设备上却会溢出。图片如下：-

在PC上，它看起来像这样：-

无论如何，这是

内的内容框：

---

在wordpress中，有一个php函数，如果

wp\u is\u mobile（）

，该函数将返回true，然后可以将所需的类放入HTML中

---

和wordpress将class

.mobile

添加到您的

正文中

，这样您就可以在是否有

.mobile

类的情况下放置不同的填充。

尝试在css中使用媒体查询添加填充底部：

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {

 Your content box class { 
     padding-bottom: ;
     margin-bottom: ;

 }

---

}

仅当文档宽度小于500像素时才更改边距和填充：

@media screen and (max-width: 500px) {
    .site-content article {
       padding-bottom:0px;
       margin-bottom:0px;
}

---

你能解释一下吗？默认情况下，WP有一个可以用于手机的功能，例如，如果你在手机上时可以在HTML代码中添加一个类：

乐意帮助！检查不同大小/分辨率的介质查询：
@media screen and (max-width: 500px) {
    .site-content article {
       padding-bottom:0px;
       margin-bottom:0px;
}