Css 内联/并排引导下拉菜单

我希望在一个按钮上内联（并排）组合两个下拉式样式列表

因此，与上的示例类似，但会弹出两个内联菜单

我知道bootstrap有一个

列表内联类（见此处的操作：），但我希望垂直列表彼此相邻，而不是所有项目水平排列

是什么神奇的组合让我可以把这些垂直列表放在一个下拉列表中？
在谷歌搜索了一段时间后，我发现这篇文章：

HTML

<ul class="nav">
  <li class="dropdown">
    <a href="#" data-toggle="dropdown">Dropdown Heading</a>
    <div class="dropdown-menu multi-column">
      <div class="container-fluid">
        <div class="row-fluid">
          <div class="span6">
            <ul class="dropdown-menu">
              <li><a href="#">Col 1 - Opt 1</a></li>
              <li><a href="#">Col 1 - Opt 2</a></li>
            </ul>
          </div>
          <div class="span6">
            <ul class="dropdown-menu">
              <li><a href="#">Col 2 - Opt 1</a></li>
              <li><a href="#">Col 2 - Opt 2</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </li>
</ul>

实时示例：
我非常喜欢这段代码，我的挑战是如何处理一个菜单，当ul标签的数量未知时，该菜单由数据库填充。
.dropdown-menu.multi-column {
    width: 400px;
}

.dropdown-menu.multi-column .dropdown-menu {
    display: block !important;
    position: static !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
}