根据屏幕大小更改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;
}