2015-09-07 2 views
0

Я пытаюсь включить табличную структуру в навигационную панель Bootstrap. В настоящее время у меня есть следующие настройки:Bootstrap - верхняя панель с вкладками

<div class="navbar navbar-inverse navbar-static-top"> 

     <div class="container-fluid"> 
     <div class="navbar-header"> 
      <div class="navbar-brand"> 
      <i class="fa fa-cog"></i> Settings 
      </div> 
     </div> 
     <div class="container collapse navbar-collapse"> 
      <ul class="nav nav-tabs "> 
      <li><a href="#/menu1">MENU-ITEMS1</a></li> 
      <li><a href="#/menu2">MENU-ITEMS2</a></li> 
      <li><a href="#/menu3">MENU-ITEMS3</a></li> 
      <li><a href="#/menu4">MENU-ITEMS4</a></li> 
      </ul> 
     </div> 
     </div> 
    </div> 

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

Следующая Bootply демонстрирует проблему: http://www.bootply.com/ouKLqFBeqj

+0

could'nt вы просто добавить 'маржинального-top'? – NooBskie

ответ

1

Вот является Codepen вы можете проверить http://codepen.io/noobskie/pen/rOVaKV

Все ив сделал включено исправление по ссылке я разместил в комментарии Twitter Bootstrap: Align nav-tabs to bottom of div

По существу, все, что вам нужно сделать, это добавить класс position:relative в родительский div ваших вкладок, а затем в ваш список вкладок добавить position:absolute; bottom:0; и в вашем случае я добавил left:95 из-за вашей NavBar ссылке

Смежные вопросы