Bootstrap navbar misaligned dropdown

Question

У меня есть навигационная панель с несколькими выпадающими списками. Они были изменены, чтобы использовать контейнер для отображения 4 столбца содержимого ниспадающего

Обратите внимание, что для каждого выпадающего списка на панели навигации, выпадающее меню не выровненным с контейнером (серая зона). Я хотел бы, чтобы все выпадающие списки были выровнены с контейнером.

Я пробовал абсолютное позиционирование, но это не сработало хорошо, и мне интересно, есть ли лучший способ загрузки?

код:

<nav class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
    </div> 
    <div id="navbar" class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav"> 
     <li class="dropdown"> 
      <a href="#" 
      class="dropdown-toggle" 
      data-toggle="dropdown" 
      role="button" aria-haspopup="true" 
      aria-expanded="false"> 
      Dropdown 1 <span class="caret"></span> 
      </a> 
      <div class="dropdown-menu"> 
      <div class="container"> 
       <div class="row"> 
       <div class="col-lg-3"> 
        <ul class="list-unstyled"> 
        <li><a href="#">Action</a></li> 
        <li><a href="#">Another action</a></li> 
        <li><a href="#">Something else here</a></li> 
        <li class="divider" role="separator"></li> 
        <li class="dropdown-header">Nav header</li> 
        <li><a href="#">Separated link</a></li> 
        <li><a href="#">One more separated link</a></li> 
        </ul> 
       </div> 
       <div class="col-lg-3"> 
        <ul class="list-unstyled"> 
        <li><a href="#">Action</a></li> 
        <li><a href="#">Another action</a></li> 
        <li><a href="#">Something else here</a></li> 
        <li class="divider" role="separator"></li> 
        <li class="dropdown-header">Nav header</li> 
        <li><a href="#">Separated link</a></li> 
        <li><a href="#">One more separated link</a></li> 
        </ul> 
       </div> 
       <div class="col-lg-3"> 
        <ul class="list-unstyled"> 
        <li><a href="#">Action</a></li> 
        <li><a href="#">Another action</a></li> 
        <li><a href="#">Something else here</a></li> 
        <li class="divider" role="separator"></li> 
        <li class="dropdown-header">Nav header</li> 
        <li><a href="#">Separated link</a></li> 
        <li><a href="#">One more separated link</a></li> 
        </ul> 
       </div> 
       <div class="col-lg-3"> 
        <ul class="list-unstyled"> 
        <li><a href="#">Action</a></li> 
        <li><a href="#">Another action</a></li> 
        <li><a href="#">Something else here</a></li> 
        <li class="divider" role="separator"></li> 
        <li class="dropdown-header">Nav header</li> 
        <li><a href="#">Separated link</a></li> 
        <li><a href="#">One more separated link</a></li> 
        </ul> 
       </div> 
       </div> 
      </div> 
      </div> 
     </li> 
     <li class="dropdown"> 
      <a href="#" 
      class="dropdown-toggle" 
      data-toggle="dropdown" 
      role="button" 
      aria-haspopup="true" 
      aria-expanded="false"> 
      Dropdown 1 <span class="caret"></span> 
      </a> 
      <div class="dropdown-menu"> 
      <div class="container"> 
       <div class="row"> 
       <div class="col-lg-3"> 
        <ul class="list-unstyled"> 
        <li><a href="#">Action</a></li> 
        <li><a href="#">Another action</a></li> 
        <li><a href="#">Something else here</a></li> 
        <li class="divider" role="separator"></li> 
        <li class="dropdown-header">Nav header</li> 
        <li><a href="#">Separated link</a></li> 
        <li><a href="#">One more separated link</a></li> 
        </ul> 
       </div> 
       <div class="col-lg-3"> 
        <ul class="list-unstyled"> 
        <li><a href="#">Action</a></li> 
        <li><a href="#">Another action</a></li> 
        <li><a href="#">Something else here</a></li> 
        <li class="divider" role="separator"></li> 
        <li class="dropdown-header">Nav header</li> 
        <li><a href="#">Separated link</a></li> 
        <li><a href="#">One more separated link</a></li> 
        </ul> 
       </div> 
       <div class="col-lg-3"> 
        <ul class="list-unstyled"> 
        <li><a href="#">Action</a></li> 
        <li><a href="#">Another action</a></li> 
        <li><a href="#">Something else here</a></li> 
        <li class="divider" role="separator"></li> 
        <li class="dropdown-header">Nav header</li> 
        <li><a href="#">Separated link</a></li> 
        <li><a href="#">One more separated link</a></li> 
        </ul> 
       </div> 
       <div class="col-lg-3"> 
        <ul class="list-unstyled"> 
        <li><a href="#">Action</a></li> 
        <li><a href="#">Another action</a></li> 
        <li><a href="#">Something else here</a></li> 
        <li class="divider" role="separator"></li> 
        <li class="dropdown-header">Nav header</li> 
        <li><a href="#">Separated link</a></li> 
        <li><a href="#">One more separated link</a></li> 
        </ul> 
       </div> 
       </div> 
      </div> 
      </div> 
     </li> 
     </ul> 
    </div> 
    </div> 
</nav> 

Answer 1

Каждый ваш dropdown-menu содержит <div class="container"> который фиксированный width, соответствующий размеру экрана.

Вы должны вручную установить ширину контейнера: <div class="container" style="width:...">

Или создать CSS класс для каждого размера экрана <div class="container custom-width">:

@media (min-width: 768px) { 
    .custom-width { 
    width: ... !important; 
    } 
} 
@media (min-width: 992px) { 
    .custom-width { 
    width: ... !important; 
    } 
} 
@media (min-width: 1200px) { 
    .custom-width { 
    width: ... !important; 
    } 
}