Bootstrap `.hidden-xs` не скрывает div

Я пытаюсь создать сайт, который скроет расширенный раздел для пользователей на маленьком экране, используя Bootstrap's .hidden-xs Чтобы проверить его, я использую мобильный эмулятор Chrome, установив его на «iPhone 5» (довольно маленький). Однако, когда я обновляю страницу, она не скрывает div. Я использую класс неправильно?Bootstrap `.hidden-xs` не скрывает div

HTML

<!DOCTYPE html> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
     <meta name="viewport" content="width=device-width, intial-scale=1"> 
     <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
     <link rel="stylesheet" type="text/css" href="static/css/todo.css"> 
     <title>TODO</title> 
    </head> 

    <body> 
     <div class="container-fluid"> 
      <header> 

      </header> 
      <div id="left"> 
       <div class="test"></div> 
       <div class="test"></div> 
       <div class="test"></div> 
       <div class="test"></div> 
       <div class="test"></div> 
       <div class="test"></div> 
       <div class="test"></div> 
      </div> 
      <div class="main" class="hidden-xs"> 
      </div> 
     </div> 
    </body> 
</html>

CSS

/* CSS Document */ 

body { 
    margin: 0; 
} 

header { 
    height: 10em; 
    width: 100%; 
    border-bottom: 1px solid #000000; 
} 

#left { 
    float: left; 
    height: 80%; 
    max-width: 100%; 
    width: 20%; 
    border-right: 1px solid black; 
    overflow: scroll; 
} 

#main { 
    float: left; 
    width: 80%; 
    height: 100%; 
} 

.test { 
    height: 10em; 
    background-color: #eeeeee; 
    width: 100% 
} 

.test:hover { 
    background-color: #dddddd; 
}

здесь является JSFiddle демонстрируя свой код: https://jsfiddle.net/James_Parsons/jwqdbn61/

EDIT

Очевидно, что iPhone 5 недостаточно мал. Если я использую как .hidden-xs, так и .hidden-sm, он будет скрыт на всех небольших устройствах?

источник

2015-03-26 James_Parsons

возможный дубликат из [медиа-запросов iPhone 5 CSS] (http://stackoverflow.com/questions/12539697/iphone-5-css-media-query) – KyleMit

Ширина iPhone5 составляет 1136 пикселей, поэтому добавление hidden-sm тоже не поможет. Вам нужно будет добавить запрос пользовательских средств массовой информации, чтобы скрыть .main так:

@media (max-width: 1199px) { 
    .main { 
     display: none; 
    } 
} 
@media (min-width: 1200px) { 
    .main { 
     display: block; 
    } 
}

НО есть много людей, использующих ПК и ноутбуки с шириной экрана в этом диапазоне, так что вы могли бы в конечном итоге Скрытие div для них тоже.

Если вы хотите скрыть div на телефонах/планшетах с большой шириной, вам, возможно, придется обратиться к старой школе user-agent метод обнаружения устройств, который включает использование JavaScript для проверки того, является ли устройство телефоном/Таблетка или нет.

Кроме того, как уже упоминалось выше, Кайл, вы должны определить свой main класс, а также ваши hidden-xx класса запросов вместе, как это:

<div class="main hidden-xs">

источник

2015-03-26 17:17:16

Есть две проблемы:

One заключается в том, что jsFiddle не включает тег viewport, поэтому эмуляция устройства не пытается изменить размер окна просмотра. Без этого вы не сможете воспользоваться гибкими классами Bootstrap. Убедитесь в том, чтобы включать в себя следующее: в качестве первого элемента в голове элемента:
```
<meta name="viewport" content="width=device-width, initial-scale=1"> 
```
Here's a plunker that includes a runnable instance
Другой вопрос заключается в том, что у вас есть class определены два раза в вас основной DIV:
```
<div class="main" class="hidden-xs"> 
```
Поэтому, если вы проверите элемент, вы заметите, что второй класс игнорируется, и вы никогда не втягиваете hidden-xs.Вместо того, чтобы добавить их как разделенные пробелом так:
```
<div class="main hidden-xs"> 
```

Теперь он должен работать нормально:

источник

2015-03-26 17:52:03 KyleMit

Не работает :(. –

@James_Parsons, это не очень описательно/полезно. Вы имеете в виду использование эмулятора? На реальном устройстве? Используя ссылку, которую я предоставил? Внесите изменения самостоятельно? Две вещи, которые я указал, определенно мешали этому работать. Когда они прояснились, это сработало для меня. Если вы используете Bootstrap, вам нужен тег meta viewport, поэтому притворяясь, что имеется больше пикселей и написание пользовательского CSS для уже предоставленных классов, это не очень стабильное решение. – KyleMit

попробовать это добавить этот CSS:

@media (max-width:767px){.hidden-xs{display:none!important}}

источник

2016-07-21 22:06:05 Offboard

Bootstrap `.hidden-xs` не скрывает div

ответ

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