Как предотвратить загрузку кнопок navbar из stacking

Question

Я пытаюсь создать отзывчивую страницу.

Как это выглядит в широком браузере.

Он изменяется на ff. когда я делаю это сужать:

То, что я хочу, чтобы это произошло так:

Это мой код для этого:

/**For Eample Only So the Icons are Visible*/ 
 

 
.navbar-ct-blue { 
 
    background: #1B96BF; 
 
}

<link href="https://cdn.bootcss.com/pixeden-stroke-7-icon/1.2.3/dist/pe-icon-7-stroke.min.css" rel="stylesheet" /> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<nav class="navbar navbar-ct-blue navbar-fixed-bottom" role="navigation"> 
 
    <div class="container"> 
 
    <ul class="nav nav-justified"> 
 
     <li class="navbar-nav"> 
 
     <a href="#"> 
 
      <i class="pe-7s-piggy" style="color: white;"></i> 
 
     </a> 
 
     </li> 
 
     <li class="navbar-nav"> 
 
     <a href="#"> 
 
      <i class="pe-7s-cash" style="color: white;"></i> 
 
     </a> 
 
     </li> 
 
     <li class="navbar-nav"> 
 
     <a href="#"> 
 
      <i class="pe-7s-wallet" style="color: white;"></i> 
 
     </a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
    <!-- /.container-fluid --> 
 
</nav>

Я смотрел эти ссылки, но я не мог найти ответ. Пожалуйста помоги.

How to prevent Bootstrap navbar from displaying in multiple lines without collapsing them into an icon

How to prevent a bootstrap navbar from collapsing when window resizing

Centering navbar buttons in bootstrap

Answer 1

Вы видите это происходит, так как nav-justified класс использует только display:table-cell выше 768px:

@media (min-width:768px) { 
.nav-justified > li { 
    display: table-cell; 
    width: 1% 
} 

Вот два примера, которые решают это:

Использование nav-justified:

.navbar.navbar-ct-blue { 
 
    background: #1B96BF; 
 
    border: 1px solid #1B96BF; 
 
    max-height: 50px; 
 
    line-height: 30px; 
 
    margin: 0; 
 
} 
 
.navbar.navbar-ct-blue .nav-justified > li { 
 
    display: table-cell; 
 
    width: 1% 
 
} 
 
.navbar.navbar-ct-blue .nav-justified > li > a { 
 
    color: white; 
 
    font-size: 30px; 
 
} 
 
.navbar.navbar-ct-blue .nav-justified > li > a:hover { 
 
    color: #00F2FF; 
 
    background: none; 
 
}

<link href="https://cdn.bootcss.com/pixeden-stroke-7-icon/1.2.3/dist/pe-icon-7-stroke.min.css" rel="stylesheet" /> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<nav class="navbar navbar-ct-blue navbar-fixed-bottom" role="navigation"> 
 

 
    <div class="container"> 
 
    <ul class="nav nav-justified"> 
 
     <li> 
 
     <a href="#"> 
 
      <span class="pe-7s-piggy"></span> 
 
     </a> 
 
     </li> 
 
     <li> 
 
     <a href="#"> 
 
      <span class="pe-7s-cash"></span> 
 
     </a> 
 
     </li> 
 
     <li> 
 
     <a href="#"> 
 
      <span class="pe-7s-wallet"></span> 
 
     </a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 

 
</nav>

Использование сетки:

.navbar.navbar-ct-blue { 
 
    background: #1B96BF; 
 
    border: 1px solid #1B96BF; 
 
    margin: 0; 
 
} 
 
.navbar.navbar-ct-blue .nav-row span { 
 
    color: white; 
 
    padding: 20px 0; 
 
    font-size: 30px; 
 
} 
 
.navbar.navbar-ct-blue .nav-row span:hover { 
 
    color: #00F2FF; 
 
}

<link href="https://cdn.bootcss.com/pixeden-stroke-7-icon/1.2.3/dist/pe-icon-7-stroke.min.css" rel="stylesheet" /> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<nav class="navbar navbar-inverse navbar-fixed-bottom navbar-ct-blue" role="navigation"> 
 

 
    <div class="container"> 
 
    <div class="row nav-row text-center"> 
 
     <div class="col-xs-4"> 
 
     <a href="#"><span class="pe-7s-piggy"></span></a> 
 
     </div> 
 
     <div class="col-xs-4"> 
 
     <a href="#"><span class="pe-7s-cash"></span></a> 
 
     </div> 
 
     <div class="col-xs-4"> 
 
     <a href="#"><span class="pe-7s-wallet"></span></a> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
</nav>

Answer 2

Чтобы дать <li class="navbar-nav">, очевидно, неправильно. Удаление, которое может исправить. Кроме того, как сказал Тасос, inline-block для элемента списка должен это сделать. Конечно, посмотрите в соответствующем запросе на медиа.