Моя страница, основанная на начальной загрузке, не реагирует

Моя страница не меняет параметры размера xs при изменении размера окна моего браузера на его минимальную ширину. Что мне здесь не хватает?Моя страница, основанная на начальной загрузке, не реагирует

CodePen

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' - добавьте еще один 'div' для' .nav', поместите его в '.container' - btw, если вы хотите иметь одинаковый размер для' .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 (которые не вытеснены другими, более конкретными заявлениями в стиле) будет иметь синюю если ширина экрана не превышает 768 пикселей.

источник

2015-08-14 21:00:13 isherwood

Моя страница, основанная на начальной загрузке, не реагирует

ответ

Смежные вопросы