2013-12-16 3 views
4

извините за задание этого простого вопроса, но я не могу понять это.Какой класс содержит Bootstraps рухнул стиль меню

Какой класс css несет ответственность за свернутый пункт меню (не обычный)?

Для нормального меню я использую этот стиль, чтобы отобразить цветную границу:

.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus { 
background-color: #232932; 
color:white; 
height:80px; 
border-top:5px solid #77d757; 
padding-top:25px; 
} 

.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { 
background-color: #232932; 
color:white; 
height:80px; 
border-top:5px solid #e20017; 
padding-top:25px; 
} 

Но я не хочу, чтобы отобразить эту границу на пункте меню свернутого ...

+0

Вы имеете в виду этот класс: 'collapse navbar-collapse' Если да, проверьте: http://getbootstrap.com/components/#navbar – Fox

+0

Нет сожаления, я не думаю, что это то, что я имею в виду, я обновил свой вопрос a немного точнее ... – Bene

+0

Вы ищете раздел навигационной панели, который уходит на более мелкие экраны или раздел, который остается? Я предполагаю, что вы имеете в виду раздел, который остается, и я не верю, что для этого есть класс CSS. Вероятно, вам лучше всего использовать медиа-запросы для соответствующих селекторов. –

ответ

1

Я мог бы быть неверно, но я считаю, что вы ищете класс in с селектором navbar-default navbar-collapse.in.

Этот дополнительный класс in отображается только в том случае, если разворачивается панель навигации с помощью кнопки, которая появляется. Тем не менее, вы можете столкнуться с проблемами, потому что есть третий класс: collapsing с селектором navbar-collapse.collapsing, который появляется во время расширения меню. Я предполагаю, что вы не хотите, чтобы ваши границы отображались и во время этого процесса.

Bootstrap добавляет эти два класса (in и collapsing, соответственно), когда меню активно, и поэтому оно имеет более сильный селектор CSS.

Надеюсь, я правильно вас понимаю!

+0

Я думаю, что это то, что я ищу, но он не работает. Вот картина проблемы. В верхнем меню находится обычное меню (меню для настольных компьютеров и т. Д.) И ниже свернутого. В обычном меню отображаются красные и зеленые границы, которые также отображаются в сложенном меню. Это моя проблема ... И вот картина: http://www.picfront.org/d/93rG – Bene

+1

Это помогло мне. Я должен был быть очень конкретным в моем CSS, чтобы убедиться, что я переопределял классы bootstraps. '.navbar-collapse.collapsing> ul> li> a.my-button' и' .navbar-collapse.collapse.in> ul> li> a.my-button' –

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