css - Twitter bootstrap 限制折叠下拉菜单的宽度

Question

在 Twitter Bootstrap 3 中，我折叠了导航栏中的下拉菜单。
对于 ul 类，我将它们左右放置，如下所示:

   <div class="collapse navbar-collapse navbar-aaa1" id="id1">
        <ul class="nav navbar-nav pull-left">
            <li><a href="">Link left 1</a></li>
            <li><a href="">Link left 2</a></li>
            <li><a href="">Link left 3</a></li>
        </ul>
    </div>
    <!-- /.navbar-collapse -->
    <div class="collapse navbar-collapse navbar-bbb1" id="id2">
        <ul class="nav navbar-nav pull-right">
            <li><a href="">Link right 1</a></li>
            <li><a href="">Link right 2</a></li>
            <li><a href="">Link right 3</a></li>
        </ul>
    </div>
    <!-- /.navbar-collapse -->

但是下拉菜单似乎是全宽的。但我需要下拉宽度来自动。我的意思是，宽度将足够 fr 链接成为一行，但每一行都没有得到所有宽度。它应该具有尽可能小的宽度。

fiddle :http://jsfiddle.net/mavent/TXK8T/9/

当前状态:

我需要这个:

我需要这个:

Answer 1

这样的事情怎么样？

首先我们将 .navbar-aaa1 和 .navbar-bbb1 从文档的正常流中取出，这样它就不会增加 导航栏的高度。

然后我们需要添加一些背景颜色并将位置相对设置为 navbar(因为它是 position: relative 在 Bootstrap 中开箱即用)。请注意，我使用了 -1px，因为 navbar 设置了 1px 宽度的边框。

.navbar-aaa1, .navbar-bbb1 {
    position: absolute;
    background-color: #222;
    border: 1px solid #080808;
}

.navbar-aaa1 {
    left: -1px;
}

.navbar-bbb1 {
    right: -1px;
}

最后，对于更大的屏幕，我们应该使用媒体查询将定位设置回静态(因为 Bootstrap3 是移动优先的)。

@media (min-width: 768px) {
    .navbar-aaa1, .navbar-bbb1 {
        position: static;
        border: none;
    }
}

看这里:http://jsfiddle.net/TXK8T/11/