0
У меня есть следующий код: навBootstrap Navbar не появляется
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse collapse">
<ul>
<li class="navbutton" id="home_button">home</li>
<li class="navbutton" id="services_button">services</li>
<li class="navbutton" id="facility_button">facility</li>
<li class="navbutton" id="trainers_button">trainers</li>
<li class="navbutton" id="contact_button">contact</li>
</ul>
</div>
</div>
</div>
</div>
и это не работает. В частности, ссылки просто не отображаются вообще. Когда я сжимаю экран, появляются значки, но, когда я нажимаю на них, ничего не появляется. Это похоже на то, что всякий «навальный коллапс» div скрыт. Я попытался сделать JSFiddle, но он выглядел еще хуже, и я думаю, что это потому, что я не уверен, как добавить Bootstrap в JSFiddle.
Я также добавляю некоторые стили для элементов навигации. Вот соответствующий CSS в случае, если это может быть виновником.
.navbar{
top: 10px;
left: 0px;
height: 22px;
z-index:20;
width: 100%;
background-color:#D2B48C;
font-size:16px;
font-weight:bold;
text-align:center;
position:relative;
width: 85%;
margin: 0px auto;
-moz-box-shadow: 10px 10px 5px #333;
-webkit-box-shadow: 10px 10px 5px #333;
box-shadow: 10px 10px 5px #333;
}
.navbar-inner{
background-color:#D2B48C;
position: absolute;
margin-right: -50%;
left: 50%;
transform: translate(-50%, -50%);
top: 50%;
}
.navbar .container{
background-color:#D2B48C;
position: absolute;
margin-right: -50%;
left: 50%;
transform: translate(-50%, -50%);
top: 50%;
}
.nav-collapse{
background-color:#D2B48C;
color: #355E3B;
z-index: 20;
}
.collapse{
background-color:#D2B48C;
}
.nav-collapse ul{
height:100%;
}
.nav-collapse ul li{
display: inline;
padding: 0 20px;
color: #355E3B;
height: 100%;
}
.navbutton{
padding: 0 50px;
text-transform: uppercase;
background-color: #D2B48C;
color: #355E3B;
}
Мысли?
Спасибо!
это * почти *. Элементы nav появляются снова и работают, но а) они начинают переходить к следующей строке по размеру экрана, прежде чем они исчезнут - как я могу изменить ширину, с которой они переключаются? также, б) когда они исчезают, я не вижу, как появляются значки. Я нашел теоретически интерактивное место в середине панели навигации, но ничего не происходит, когда я нажимаю на него. –
Хм. Итак, некоторый прогресс. Я получаю иконки, чтобы отображаться, но ничего, когда я нажимаю на них. Вот что. Когда я бросаю их в JSFiddle, это работает. Кроме того, когда я вырезал и вставлял пример из начальной загрузки на мою страницу, это не работает. Теперь мне нужно выяснить, что на моей странице убивает! –
Вы можете изменить отступы на элементах списка. В противном случае вы захотите изменить точки останова, если вы хотите, чтобы меню сбрасывалось раньше. Прочитайте меньше или если вы используете версию sass, вы можете изменить переменные перед перекомпиляцией на то, что вам нужно. Удалите все свои собственные css, если это не необходимо. – feitla