我的基於引導程序的頁面沒有響應

當我將瀏覽器窗口調整爲其最小寬度時，我的頁面不會更改爲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

我的基於引導程序的頁面沒有響應

回答

相關問題