Bootstrap navbar dropdown отображение пунктов меню по горизонтали

Question

Я работаю над новым проектом, в котором навигатор должен быть центром страницы наверху. У меня есть следующий html ...

<div class="navbar navbar-inverse navbar-fixed-top center"> 

    <div class="container navbar-inner"> 

      <div class="navbar-header"> 

       <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 

        <span class="sr-only">Toggle Navigation</span> 

        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 

       </button> 

      </div> <!-- //.navbar-header --> 

      <div class="collapse navbar-collapse"> 

       <ul class="nav navbar-nav"> 

        <li><a href="#home">Home</a></li> 

        <li><a href="#about">About</a></li> 

        <li><a href="#project">Project</a></li> 

        <li><a href="#resume">Resume</a></li> 

        <li><a href="#contact">Contact</a></li> 

       </ul> 

      </div> <!-- //.collapse --> 

     </div> <!-- //.container .navbar-inner --> 

</div> <!-- //.navbar --> 

и css, который устанавливает пункты меню в центр.

html, body { 
margin: 0; 
padding: 0; 
width: 100%; 
} 

.container { 
    margin: 0; 
    padding: 0; 
} 

.center.navbar .nav, 
.center.navbar .nav > li { 
    float:none; 
    display:inline-block; 
    *display:inline; /* ie7 fix */ 
    *zoom:1; /* hasLayout ie7 trigger */ 
    vertical-align: top; 
} 

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

Однако функция переключения выпадающего кажется, чтобы отобразить параметры по горизонтали на среднего размера экрана. (не могу опубликовать изображение ... недостаточно репутации ~ извините!)

Как я могу получить функцию переключения выпадающего списка для отображения элементов меню по вертикали в виде списка (как должно быть по умолчанию) без, пункты, находящиеся в центре на Размер экрана рабочего стола? Любая помощь будет оценена!

Answer 1

Вы должны обернуть свой собственный CSS-код внутри медиа-запросов.

@media (min-width: 992px) будет влиять на элементы только в размере экрана рабочего стола. Узнайте больше о Grid system

html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
} 
 
.container { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
@media (min-width: 992px) { 
 
    .center.navbar .nav, 
 
    .center.navbar .nav > li { 
 
    float: none; 
 
    display: inline-block; 
 
    *display: inline; /* ie7 fix */ 
 
    *zoom: 1; /* hasLayout ie7 trigger */ 
 
    vertical-align: top; 
 
    } 
 
    .center .navbar-inner { 
 
    text-align: center; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="navbar navbar-inverse navbar-fixed-top center"> 
 

 
    <div class="container navbar-inner"> 
 

 
    <div class="navbar-header"> 
 

 
     <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
 

 
     <span class="sr-only">Toggle Navigation</span> 
 

 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 

 
     </button> 
 

 
    </div> 
 
    <!-- //.navbar-header --> 
 

 
    <div class="collapse navbar-collapse"> 
 

 
     <ul class="nav navbar-nav"> 
 

 
     <li><a href="#home">Home</a> 
 
     </li> 
 

 
     <li><a href="#about">About</a> 
 
     </li> 
 

 
     <li><a href="#project">Project</a> 
 
     </li> 
 

 
     <li><a href="#resume">Resume</a> 
 
     </li> 
 

 
     <li><a href="#contact">Contact</a> 
 
     </li> 
 

 
     </ul> 
 

 
    </div> 
 
    <!-- //.collapse --> 
 

 
    </div> 
 
    <!-- //.container .navbar-inner --> 
 

 
</div> 
 
<!-- //.navbar -->