Как сделать мою навигационную панель неактивной на загрузочном блоке Twitter

Question

В настоящее время я разрабатываю веб-страницу с использованием Twitter Bootstrap, и на моей странице я хочу, чтобы панель навигации была прикреплена к верхней части страницы, которая рушится, когда ширина страница уменьшена, а вторая панель навигации зафиксирована в нижней части страницы, которая не рухнет, когда страница будет уменьшена, так как на ней будут только значки социальных сетей.

Проблема в том, что я хочу, чтобы верхняя панель навигации была отзывчивой, а нижняя не реагировала.

Возможно ли это на использовании Bootstrap 3, что я до сих пор для нижней панели навигации выглядит следующим образом:

<div class = "navbar navbar-inverse navbar-fixed-bottom"> 
    <div class = "container"> 
     <ul class = "nav navbar-nav navbar-right"> 
      <li><a href = "#">Home</a></li> 
      <li><a href = "#">Blog</a></li> 
      <li><a href = "#">Contact Us</a></li> 
      <li><a href = "#">About</a></li> 
     </ul> 
    </div> 
</div> 

Answer 1

Просто удалите navbar-nav из вашего маркированного списка и добавить display:inline-block в свой список-элементов, таких как это:

HTML:

<div class = "navbar navbar-inverse navbar-fixed-bottom"> 
    <div class = "container"> 
     <ul class = "nav navBot"> 
      <li><a href = "#">Home</a></li> 
      <li><a href = "#">Blog</a></li> 
      <li><a href = "#">Contact Us</a></li> 
      <li><a href = "#">About</a></li> 
     </ul> 
    </div> 
</div> 

CSS:

.navBot li { 
    display:inline-block;  
} 

Вот jsfiddle с над кодами: https://jsfiddle.net/AndrewL32/e0d8my79/41/

Answer 2

Другой способ сделать Navbar не реагируют будет давать .navbar фиксированную ширину, как 600px.