Bootstrap 导航栏未对齐的下拉菜单

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