Проблема с загрузкой бутстрапа выпадающего списка

Question

Я создал загрузочный навигатор с несколькими пользовательскими стилями, но я не уверен, почему выпадающее меню так странно.

вот скриншот:

Вот мой HTML & пользовательских CSS:

nav.navbar-static-top { 
 
    margin-bottom: 0; 
 
    background: black; 
 
    height: 100px; 
 
    line-height: 100px; 
 
} 
 

 
.navbar .navbar-nav { 
 
    display: inline-block; 
 
    float: none; 
 
    vertical-align: bottom; 
 
    background: black; 
 
} 
 

 
.navbar .navbar-collapse { 
 
    text-align: center; 
 
} 
 

 
.navbar .navbar-collapse li a { 
 
    color: white; 
 
} 
 

 
@media (max-width: 768px) { 
 
    .navbar-toggle { 
 
     position: absolute; 
 
     right: 0; 
 
     top: 25%; 
 
    } 
 
}

<nav class="navbar navbar-inverse navbar-static-top"> 
 
     <div class="container-fluid"> 
 
      <!-- Brand and toggle get grouped for better mobile display --> 
 
      <div class="navbar-header"> 
 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
 
        <span class="sr-only">Toggle navigation</span> 
 
        <span class="icon-bar"></span> 
 
        <span class="icon-bar"></span> 
 
        <span class="icon-bar"></span> 
 
       </button> 
 
      </div> 
 

 
      <!-- Collect the nav links, forms, and other content for toggling --> 
 
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
       <ul class="nav navbar-nav"> 
 
        <li><a href="#">Blog</a></li> 
 
        <li><a href="#">How it Works</a></li> 
 
        <li><a href="#">What you get</a></li> 
 
        <li><a href="#">The manifesto</a></li> 
 
        <li><a href="#">FAQ</a></li> 
 
        <li><a href="#">My Account</a></li> 
 
        </li> 
 
       </ul> 
 
       </ul> 
 
      </div> 
 
      <!-- /.navbar-collapse --> 
 
     </div> 
 
     <!-- /.container-fluid --> 
 
    </nav>

я могу получить СЧА, чтобы вернуться к полной ширине НО, когда я это сделаю, навигатор не начнет перескакивать.

Чтобы сделать это, я просто добавить это в моем медиа-запроса:

.navbar .navbar-nav { 
    display: block; 
} 

Однако это не является идеальным.

Все, что я хотел сделать;

Когда окно просмотра больше, чем 768px:

• центра детали нав в нижней части навигации
• установить цвет навигационные элементы, как белый

И

При площадь просмотра меньше 768 пикселей:

• Имеет навигацию по центру и по всей ширине (как и должно быть по умолчанию) при переключении для открытия
• Отправлять навигацию со дна навигатора (как это обычно делается на BS), но по какой-то причине она застряла вершина?

Я не могу для жизни меня понять это, хотя мой код не должен влиять на вещи таким образом.

Если какие-либо разъяснения необходимы, просто спросите ниже!

Приветствие,

- SD

Answer 1

Вы должны изменить некоторые правила CSS: вам не нужно какие-либо правила для класса Navbar-тумблер, и вы можете использовать отступы вместо высоты/высота линии на вашем навигаторе. Правило inline-block - это то, что заставляет навигатор не расширяться до полной ширины под 768px, поэтому вы должны вставить эти правила в медиа-запрос.

См. Рабочий пример Фрагмент.

.navbar.navbar-inverse { 
 
    background: black; 
 
} 
 
.navbar.navbar-inverse .navbar-collapse { 
 
    text-align: center; 
 
} 
 
.navbar.navbar-inverse .navbar-nav > li > a { 
 
    color: white; 
 
} 
 
@media (min-width: 768px) { 
 
    .navbar.navbar-inverse { 
 
    padding-top: 50px; 
 
    padding-bottom: 0px; 
 
    } 
 
    .navbar.navbar-inverse .navbar-nav { 
 
    display: inline-block; 
 
    float: none; 
 
    vertical-align: bottom; 
 
    background: black; 
 
    } 
 
} 
 
@media (max-width: 767px) { 
 
    .navbar.navbar-inverse { 
 
    padding-top: 25px; 
 
    padding-bottom: 25px; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<nav class="navbar navbar-inverse navbar-static-top"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 

 
     </button> 
 
    </div> 
 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
     <ul class="nav navbar-nav"> 
 
     <li><a href="#">Blog</a> 
 

 
     </li> 
 
     <li><a href="#">How it Works</a> 
 

 
     </li> 
 
     <li><a href="#">What you get</a> 
 

 
     </li> 
 
     <li><a href="#">The manifesto</a> 
 

 
     </li> 
 
     <li><a href="#">FAQ</a> 
 

 
     </li> 
 
     <li><a href="#">My Account</a> 
 

 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</nav>