Bootstrap 3 - 导航栏中的网格2列

Question

我有这样的导航（简化）：

Codeply Link

            <ul class="nav navbar-nav">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-xs-6">
                            <li>foo</li>
                        </div>
                        <div class="col-xs-6">
                            <li>bar</li>
                        </div>
                    </div>
                </div>
            </ul>

在结果中，列表菜单项在移动设备中堆叠在一起，例如：

| foo |
|吧|

我的大脑告诉我它应该是移动设备上的。 | foo |吧|

最后它应该看起来像this。 （移动导航）

Answer 1

您可以简单地使用list-items代替div这样的

<ul class="nav navbar-nav hidden-lg hidden-md test">
  <li><a href="../navbar-static-top/">asdf</a></li>
  <li><a href="../navbar-static-top/">asdf</a></li>  
</ul>

更新

您的overflow-child班级强制执行100％的宽度

.overflow-child {
  /*width: 100%;*/
  height: 100%;
  overflow: auto;
  padding-right: 15px;
}