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

当我将浏览器窗口调整为其最小宽度时，我的页面不会更改为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); }

来源

2015-08-14 zzxjoanw

首先，我个人从不像你所做的那样修改网格元素。你只是在问问题。相反，请修改网格内部的内容。那么，是否同时使用'.nav'和'.container'？ – isherwood

将'.container'保留在外部'div'上 - 为'.nav'添加另一个'div'，将它放在'.container'中 - 如果要为'.xs'和' .md'，你可以简单地指定'.xs'，它也适用于所有更大的尺寸 – ochi

我想你误解了媒体的质疑做。他们不激活和停用课程。他们控制风格。应用于任何类的样式都是基于标准的CSS继承和特殊性来实现的。

代替将你的风格，以各种网格类的，试试这个：

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

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

在这个例子中，有.col-xs-3类（即不被其他更具体的风格所取代的语句）的元素将有一个蓝色的背景除非屏幕宽度低于768px。

来源

2015-08-14 21:00:13 isherwood

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

回答

相关问题