html - 根据屏幕尺寸更改 Bootstrap 网格元素填充

Question

如何根据屏幕尺寸设置不同的内边距。 例如，我希望媒体主体的 col-sm-7 具有 padding: 26px 16px 30px 10px; 而媒体主体的 col-md-8 有:padding: 32px 30px 10px 35px;

这是我的那部分代码:

<div class="media-body  col-sm-7 col-md-8 ">
           <h4 class="media-heading"><%= link_to 'Contacts', root_path, class: 'media-heading' %></h4>
           <p class="hidden-sm">Where to find the <strong>Creatives</strong> contact module and more.</p>
</div>

这是我的 application.css.scss 文件:

.media-body .col-md-8 {
    padding: 32px 30px 10px 35px;
}

.media-body .col-sm-7 {
    padding: 26px 16px 30px 10px;
}

这个 css 不起作用，有没有办法调用 Css 文件中的 col 类而不影响文档其余部分的其他类似 col 类并获得所需的填充？

Answer 1

去掉css中.media-body .col-md-8之间的空格

所以它读作...

.media-body.col-md-8 {
    padding: 32px 30px 10px 35px;
}

.media-body.col-sm-7 {
    padding: 26px 16px 30px 10px;
}