Bootstrap下拉菜单不会在div class = container中打开

Question

我使用安静的复杂多级导航，我需要在引导容器中包含下拉列表的内容，因此它的最大高度符合网格高度。但是，当我这样做时，下拉列表根本不会打开。

看到小提琴（我在发出导致div的问题后立即发表评论，所以如果您评论该div，则下拉列表将正常打开）：https://jsfiddle.net/s5ug07t4/7/

这是带容器的HTML：

<ul class="nav navbar-nav">
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Main menu item</a>
      <div class="container"><!-- That's the issue causing container -->
      <ul class="dropdown-menu row">
        <li class="col-sm-3 col-xs-6">
          <ul>
            <li class="dropdown-header">abc</li>
            <li class="dropdown-header">def</li>
            <li class="dropdown-header">ghi</li>
          </ul>
        </li>
        <li class="col-sm-3 col-xs-6">
          <ul>
            <li class="dropdown-header">abc</li>
            <li class="dropdown-header">def</li>
            <li class="dropdown-header">ghi</li>
          </ul>
        </li>
        <li class="col-sm-3 col-xs-6">
          <ul>
            <li class="dropdown-header">abc</li>
            <li class="dropdown-header">def</li>
            <li class="dropdown-header">ghi</li>
          </ul>
        </li>
        <li class="col-sm-3 col-xs-6">
          <ul>
            <li class="dropdown-header">abc</li>
            <li class="dropdown-header">def</li>
            <li class="dropdown-header">ghi</li>
          </ul>
        </li>

      </ul>
      </div><!-- /That's the issue causing container -->
    </li>
  </ul>

这是我更新的小提琴，所以你确切地看到我需要的东西：https://jsfiddle.net/s5ug07t4/9目前它不是有效的HTML，因为在ul里面有div容器，但是，将它移动一级用该容器包装ul会打破下拉列表，因此它不再打开。