Bootstrap改变边距

时间:2016-11-11 18:12:30

标签: html css margin

有什么方法可以在移动设备上显示内容时更改屏幕左侧和右侧的内容边距? 因此,内容在桌面上具有边距,而在手机上没有边距。 任何想法?

2 个答案:

答案 0 :(得分:3)

是的,使用媒体查询。使用媒体查询,您可以说在屏幕的某个宽度处应该激活某个css。例如,当您的屏幕宽度不超过400px时,它应该将字体大小恢复为10px。请尝试使用以下代码作为示例:

@media screen and (max-width: 400px){
    p{
        font-size: 10px;
    }
}
祝你好运!

答案 1 :(得分:1)

正如Casper所说,你需要使用媒体查询,El Devoper给你链接。如果你使用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
    }
}

希望它有用