Is it possible to make the bootstrap-3 menu to the width of the screen, and not the parent component? there is a need to organize a menu in this way image tried to implement in this way

<nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav col-lg-10 col-md-10 col-sm-20 col-xs-20"> <li><a href="#">Главная/a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Для него </a> <ul class="dropdown-menu"> <ul class="nav nav-pills nav-stacked nav-tabs"> <li class="active"><a href="#home_him" data-toggle="tab">Главная</a></li> <li><a href="#profile_him" data-toggle="tab">Профиль</a></li> <li><a href="#messages_him" data-toggle="tab">Сообщения</a></li> <li><a href="#settings_him" data-toggle="tab">Настройки</a></li> </ul> <div class="tab-content"> <div class="tab-pane active" id="home_him"> <li><a href="#">Действие</a></li> <li><a href="#">Другое действие</a></li> <li><a href="#">Что-то еще</a></li> </div> <div class="tab-pane" id="profile_him"> <li><a href="#">Действие</a></li> <li><a href="#">Другое действие</a></li> <li><a href="#">Что-то еще</a></li> </div> <div class="tab-pane" id="messages_him"> <li><a href="#">Действие</a></li> <li><a href="#">Другое действие</a></li> <li><a href="#">Что-то еще</a></li> </div> <div class="tab-pane" id="settings_him"> <li><a href="#">Действие</a></li> <li><a href="#">Другое действие</a></li> <li><a href="#">Что-то еще</a></li> </div> </div> </ul> </li> ... </ul> </div> </div>

Nothing came of it, even the drop-down menu does not work. Can you make such a menu in bootstrap using 3 standard methods?

  • 2
    container-fluid - soledar10
  • Depends on your current layout. And how much you can change it. Is it possible to position the menu outside .container and other similar blocks? - Vitaliy Emelyantsev
  • @VitaliyEmeliantsev I still study the topic how to do it better than I am asking for the best recipes. - Sergalas
  • @ soledar10 publish the answer, the question hangs open, and the answer you have already written in the comments. - Alex
  • @ VitaliyEmeliantsev who told you that I found the answer? What I found, I do not like the answer. - Sergalas

1 answer 1

Example

Feeddle

 .nav > li.dropdown.open { position: static; } .nav > li.dropdown.open .dropdown-menu { display: table; border-radius: 0px; width: 100%; text-align: center; left: 0; right: 0; } .dropdown-menu > li { display: table-cell; height: 50px; line-height: 50px; vertical-align: middle; } @media screen and (max-width: 767px) { .dropdown-menu > li { display: block; } } 
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <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.7/js/bootstrap.min.js"></script> <div class="navbar navbar-default navbar-static-top"> <div class="container"> <div class="navbar-header"> <div class="navbar-brand">LOGO</div> <button class="navbar-toggle" data-toggle="collapse" data-target=".btnCollapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse btnCollapse"> <ul class="nav navbar-nav navbar-right"> <li class="active"><a href="#">Link 1</a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Link 2<span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Submenu 2</a> </li> <li><a href="#">Submenu 2</a> </li> <li><a href="#">Submenu 2</a> </li> <li><a href="#">Submenu 2</a> </li> <li><a href="#">Submenu 2</a> </li> <li><a href="#">Submenu 2</a> </li> </ul> </li> <li><a href="#">Link 3</a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Link 4<span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Submenu 4</a> </li> <li><a href="#">Submenu 4</a> </li> <li><a href="#">Submenu 4</a> </li> <li><a href="#">Submenu 4</a> </li> <li><a href="#">Submenu 4</a> </li> <li><a href="#">Submenu 4</a> </li> </ul> </li> </ul> </div> </div> </div> <div class="container"> <div class="row">Content</div> </div>

  • dropdown is placed on the width of the parent container - Sergalas
  • @Sergalas - added example - soledar10