У меня здесь несколько проблем, но главная проблема заключается в мобильном реагировании с выпадающими меню. Я не могу понять, что я делаю неправильно.Устранение неполадок Bootstrap Navbar: непредвиденное поведение выпадающего меню
Вот мой HTML:
<div class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
</div><!--nav-header-->
<div class="collapse navbar-collapse">
<ul class="nav nav-pills">
<li><a href="index.html">Home</a></li>
<li><a href="About.html">About</a></li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" data-target="#">Practice <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">A</a></li>
<li><a href="#">B</a></li>
<li><a href="#">C</a></li>
<li><a href="#">D</a></li>
<li><a href="#">E</a></li>
</ul>
</li>
<li><a href="Blog.html">Blog</a></li>
<li><a href="Contact.html">Contact</a></li>
</ul>
</div><!--collapse-->
</div><!--container-->
</div><!--navbar-->
и вот мой CSS:
.navbar {
background: black;
position: absolute;
margin-top: 50px;
width: 100%;
border-top: 2px solid black;
border-bottom: 3px solid #4f3838;}
.navbar .nav-pills li {
font-size: 1.2em !important;}
.navbar .nav-pills a {
color: white;
margin: 0 3px 0 3px;}
.navbar .nav-pills a:hover {
color: black;}
.dropdown .dropdown-menu {
background: black;}
У меня две проблемы на мобильный: первый, после я нажимаю, а затем повторно щелкните кнопку меню его (он появляется серый, а не черный после его нажатия), а затем основное выпадающее меню отображается горизонтально, а падение вниз в раскрывающемся списке отображается вертикально, создавая горячий беспорядок. Я не знаю, что я сделал, чтобы вызвать это и как его исправить. Когда я смотрю на учебники, пример navbars по существу тот же, что и мой, и их выпадающие группы ведут себя так, как ожидалось.
Моя последняя проблема заключается в том, что, когда я выбираю «практикующую» ситуацию, у меня есть текст, чтобы черным повернуть курсор мыши, но поскольку это навигационная панель, белый цвет становится белым, когда он выбран/открыт. Поэтому, если у вас открыто меню, и вы перемещаете указатель мыши, текст белый, а фон также белый. Есть ли для этого решение CSS?
Вы можете увидеть код в действии здесь: http://www.bootply.com/5q1qGfp2c3
Если вы идете на мобильное зрение и хруст окна вниз, вы можете увидеть, что я имею в виду падения вниз.
Да, это исправляет некоторые проблемы, но вызывает несколько других. Спасибо, что нашли время, чтобы сделать все это! Я нашел этот https://stackoverflow.com/questions/23109704/makes-nav-pills-collapsable-just-like-nav-bar-in-bootstrap, который фактически решает проблему с выпадающим меню, но я не имея возможности заставить его работать на мое. –
Что это за причина и просто из любопытства, какой прецедент для навигационных таблеток, которые классы по умолчанию не могут выполнить? – vanburen
Это чисто аскет. Navbar-nav выглядит не так красиво на сайте, который я создаю в качестве навигационных таблеток. Одна вещь, которую я собираюсь сделать, это использовать бутстрап, но сделать его немного меньше резака для печенья. Ваше исправление позаботилось о проблемах, о которых я упоминал, но будет включать в себя много настроек, чтобы вернуть его к тому, что у меня есть сейчас, и более чем удвоить количество кода. Хотя, если я не смогу найти решение, мне, возможно, придется попробовать его. Но я полагаю, что должно быть относительно простое исправление. –