1

Есть ли возможность сделать меню bootstrap-3 на ширину экрана, а не родительского компонента? есть необходимость организовать меню таким образом image пытался реализовать таким образом

<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>

из этого ни чего не вышло даже выпадающее меню не работает можно в bootstrap 3 стандартными методами сделать такое меню ?

6
  • 2
    container-fluid
    – soledar10
    21 сен 2016 в 8:15
  • Зависит от вашей текущей верстки. И от того, насколько ее можно изменить. Можно ли расположить меню вне .container и других подобных блоков? 21 сен 2016 в 10:09
  • @ВиталийЕмельянцев я пока тему изучаю как лучше это сделать чем верстаю так сказать спрашиваю о лучших рецептах.
    – Sergalas
    21 сен 2016 в 11:34
  • @soledar10 опубликуйте ответ, вопрос открытым висит, а ответ вы уже написали в комментарии .
    – Alex
    19 окт 2016 в 18:08
  • @ВиталийЕмельянцев кто вам сказал что я нашел ответ? То, что я нашел, мне как ответ не нравится.
    – Sergalas
    20 окт 2016 в 10:38

1 ответ 1

0

Пример

Fiddle

.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>

2
  • dropdown ставится по ширине контейнера родителя
    – Sergalas
    20 окт 2016 в 10:37
  • @Sergalas - добавил пример
    – soledar10
    20 окт 2016 в 11:20

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.