Question

当我将浏览器窗口调整为其最小宽度时，我的页面不会更改为xs大小的选项。我在这里缺少什么？

HTML：

<head>
    <title>Sample Page Layout</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <link rel="stylesheet"
          href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet"
          href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="container nav">
        <div class="row">
            <div class="col-md-3 col-xs-3 about">About</div>
            <div class="col-md-3 col-xs-3 events">Events</div>
            <div class="col-md-3 col-xs-3 shop">Shop</div>
            <div class="col-md-3 col-xs-3 contact">Contact</div>
        </div>
    </div>
</body>

CSS：

.nav { width:100%; height:100px; background-color:#84d36f; }
.nav div { height:50%; line-height:50px; }
.col-xs-3 { font-size:0; background-color:red;}
.col-md-3 { font-size:1em; background-color:blue; }
.col-xs-3 .about { background-image:url(images/about.png); }
.col-xs-3 .events { background-image:url(images/events.png); }
.col-xs-3 .shop { background-image:url(images/shop.png); }
.col-xs-3 .contact { background-image:url(images/contact.png); }

Answer 1

我认为你误解了媒体查询的作用。他们不会激活和停用课程。他们控制风格。应用于任何类的样式都是基于标准CSS继承和特异性实现的。

不要将样式应用于各种网格类，请尝试以下方法：

.col-xs-3 {font-size:0; background-color: blue;}

@media (max-width: 767px) {
    .col-xs-3 {font-size: 0; background-color: red;}
}

在此示例中，除非屏幕宽度低于768px，否则具有类.col-xs-3的元素（不会被其他更具体的样式语句取代）将具有蓝色背景。

我的基于引导程序的页面没有响应

1 个答案: