不同设备的bootstrap段落格式

Question

嗨，我是一个相当新的引导程序，我想要实现的是在我的页面顶部有一个不同的段落格式的jumbotron，以适应背景图像，可以说30％的全宽空间。

我已将文字偏移padding-left: 300px;并且它在桌面上看起来很好，但此规则也适用于移动设备模式中的段落，因此它非常瘦和高。

有没有一种方法可以让我设置3个不同的段落，每个段落在特定的屏幕尺寸下显示？

Answer 1

只需使用媒体查询：

@media screen and (max-width: 320px)
{
    p{
        padding-left: 0;
    }
}

@media screen and (min-width: 321px) and (max-width:800px)
{
    p{
        padding-left: 100px;
    }
}

@media screen and (min-width: 801px)
{
    p{
        padding-left: 300px;
    }
}