Question

我正在学习bootstrap，我有这个非常简单的样式，没有显示。我将通过bootstrap的网站获取文档，这应该有用吗？

@media (min-width:@screen-sm-min) {
    body {
        background-color:red;
    }
}

@media (min-width:@screen-md-min) {
    body {
        background-color:blue;
    }
}

@media (min-width:@screen-lg-min) {
    body {
        background-color:green;
    }
}

Answer 1

除非您使用LESS编译器编译CSS，否则使用这样的变量将无效。而是使用实际值，在这种情况下，Bootstrap的默认值会使你的CSS看起来像这样：

@media (min-width:768px) {
    body {
        background-color:red;
    }
}

@media (min-width:992px) {
    body {
        background-color:blue;
    }
}

@media (min-width:1200px) {
    body {
        background-color:green;
    }
}

Answer 2

请记住，当您使用bootstrap时，结构基于12列网格。您有4个基于视口触发的基本媒体查询。

@media (max-width: 767px) so anything between 0px and 767px will use this set of styles.

@media (min-width: 768px) so anything between 768px and 991px will use this set of styles.

@media (min-width: 992px) so anything between 992px and 1199px will use this set of styles.

@media (min-width: 1200px) so anything 1200px or larger will use this set of styles.

列以这种方式编写。

<div class="col-lg-12"></div> the number can be anything from 1-12 based on the number of columns you wish to use.

您有3个列大小，如下所示：

col-lg-（1-12） col-md-（1-12） col-sm-（1-12） col-xs-（1-12）

只要您希望列根据视口进行响应，就可以使用大小的组合。

我希望这可以帮助你。

非常基本的bootstrap无法正常工作

2 个答案: