Bootstrap 更改边距

Question

当内容在移动设备上显示时，有没有办法改变屏幕左右两侧的内容边距？这样内容在桌面上有边距，在 phone 上没有边距。有什么想法吗？

Answer 1

是的，使用媒体查询。使用媒体查询，您可以说在屏幕的特定宽度处应该激活某个 css。例如，当您的屏幕宽度不超过 400 像素时，它应该将字体大小调回 10 像素。以下面的代码为例试试：

@media screen and (max-width: 400px){
    p{
        font-size: 10px;
    }
}

祝你好运！

Answer 2

正如 Casper 所说，您需要使用媒体查询，El Devoper 给了您 link。如果您使用 bootstrap，可能您必须使用 !important 来覆盖 bootstrap 的默认属性。

@media screen and (max-width: 320px){
    p{
        margin-left: 10px !important
        margin-right: 10px !important
        //or just use "margin: 0 10px !important" to set margins like this:
        //top and bottom = 0, left and right = 10px
    }
}

希望对您有所帮助

Bootstrap 更改边距

Bootstrap changing margins

html

css

margin