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

Question

我正在编辑Wordpress主题，我在Bootstrap的<div class="well">中添加了一个内容框。我不得不删除内容框的padding-bottom和margin-bottom，因为在桌面上显示内容框后内容框中有很多空间。虽然删除填充和边距在桌面上运行良好，但它在移动设备上溢出。图像如下： -

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

无论如何，这是<div class='well'>内的内容框：

.site-content article {
    word-wrap: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
    padding-bottom:auto;
    margin-bottom:auto;
}

Answer 1

尝试在css中添加带有媒体查询的padding-bottom：

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

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

 }

}

Answer 2

在wordpress中你有一个php函数，如果it's mobile wp_is_mobile()返回true，那么你可以将你想要的类放在HTML中。

并且wordpress会将.mobile类添加到您的body中，这样如果有.mobile课程，您可以添加不同的填充。

Answer 3

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

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