保证金只留在Bootstrap的小屏幕上

Question

如何在Bootstrap的小屏幕上为左边一行设置20 px的边距？

<div class="row mleft20">

</div>

这会将余量应用于所有屏幕。有没有办法只为小屏幕做这件事，所以我可以轻松地从屏幕边缘轻推内容。谢谢

Answer 1

使用媒体查询。 例如：

@media all and (max-width: 360px){
    .mleft20{
        margin-left: 20px;
     }
}

一些有用的链接： http://www.w3.org/TR/css3-mediaqueries/， https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

Answer 2

“ ml-sm-2 ml-sm-0”，假设您的em为10px。

您将同时需要这两个规则，因为这些规则适用于所有较大的尺寸，因此，如果没有第二个规则，边距将继续显示在更大的屏幕上。

我知道这是一个废弃的旧帖子，但是如果有人找到它，Bootstrap会提供此快捷方式进行媒体查询。您应该使用“页边距类型”-“屏幕尺寸”-“金额”，而不是完整的媒体查询，因为在Bootstrap和CSS之间划分样式实际上可能会使维护更加困难。