Twitter Bootstrap 3导航栏折叠

Question

我正在尝试将我的 Twitter Bootstrap 2 导航栏迁移到 Bootstrap 3。我的导航栏有三个部分。

"myContent1" 和 "myContent2" 将始终可见。对于小屏幕，"myContent3" 将被折叠。但是，当我在小屏幕设备上点击堆叠按钮时，折叠的菜单并没有展开。点击按钮时什么也没发生。

我已经将它放到了一个 fiddle 中：http://jsfiddle.net/mavent/LDP8K/6/

<nav class="navbar navbar-inverse navbar-fixed-top navbar-sam-main" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">

    <a class="navbar-brand navbar-left" href="" title="aaaa" id="MyContent1">
        MySite
    </a>

    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-mycol">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>



    <ul class="nav navbar-nav navbar-left" id="myContent2">
        <li class="dropdown" id="users">
            <a class="navbar-brand" href="" title="aaa" style="display:inline-block;padding-right:0px;">
                <img src="" width="24" height="24" alt="aaaa">
                MyName
            </a>
            <a class="dropdown-toggle" data-toggle="dropdown" href="#users"  style="display:inline-block;padding-left:0px;">
                <b class="caret" style="border-left: 6px solid transparent; border-right: 6px solid transparent;  border-top: 6px solid #999;"></b>
            </a>
            <ul class="dropdown-menu">
                <li><a href=""><img src="" width="24" height="30"/> OtherName</a></li>
                <li class="divider"></li>
                <li><a href="">AAAA</a></li>
                <li><a href="">BBB</a></li>
            </ul>
        </li>
    </ul>


</div>


<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-mycol">
    <ul class="nav navbar-nav navbar-right" id="myContent3">

        <li><a href="">UUUU</a></li>
        <li><a href="">YYYYY</a></li>

        <li class="dropdown" id="wer">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#wer">Tools
                <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
                <li><a href="">aaaa</a></li>
                <li><a href="">bbbb</a></li>
                <li><a href="">cccc</a></li>
            </ul>
        </li>

    </ul>

</div><!-- /.navbar-collapse -->
</nav>

编辑：根据一个人的建议，我将“切换按钮”放在navbar-header部分之外，并为按钮添加了top:0和right:0绝对样式。但是，在这种情况下，如果屏幕非常小，myContent2会穿透到按钮中。您可以从此处查看该行为：http://jsfiddle.net/mavent/paXt9/2/

编辑2：我需要这种行为：

对于大屏幕，所有内容都可见。

对于较小的屏幕，myContent2可见，myContent3被折叠。如果点击按钮，则展开myContent3。

对于非常小的屏幕，myContent2将显示在下一行。因此，myContent2和按钮不会互相冲突。

- trante

---

尝试将 navbar-header 的闭合标签移动到切换按钮之后：http://jsfiddle.net/koala_dev/LDP8K/8/ - omma2289

那么您可能想将按钮的z-index设置为出现在myContent2的顶部：http://jsfiddle.net/koala_dev/LDP8K/9/ - omma2289

尝试将两个元素都包装在一个容器<span>中：http://jsfiddle.net/koala_dev/fgNZx/1/ - omma2289

抱歉回复晚了，你只需要像我们之前在切换按钮中所做的那样调整链接的z-index，并且如果你想在第二行时将内容居中对齐，你可以设置一个媒体查询，但请注意你需要计算出内容不适合一行的点，并且它可能在不同设备上无法保持一致。 - omma2289

http://jsfiddle.net/koala_dev/fgNZx/4/ - omma2289

Answer 1

下拉菜单元素占据了整个导航栏的宽度，并阻止了按钮的正常工作，为了解决这个问题，您可以将品牌链接和navbar-toggle按钮的z-index设置得更高：

.navbar-sam-main .navbar-toggle, .navbar-sam-main .navbar-brand {
    position: relative;
    z-index:1;
}

针对评论区提出的其他问题，修复方案是将下拉链接和三角符号放在一个span标签中以便作为单个元素换行，并使用媒体查询在链接转到第二行时将其居中显示：

HTML

<li class="dropdown" id="users"> 
    <span>
        <a class="navbar-link" href="" title="aaa" style="display:inline-block;padding-right:0px;">
            <img src="" width="24" height="24" alt="aaaa" />
            MyName
        </a>
        <a class="dropdown-toggle" data-toggle="dropdown" href="#users"  style="display:inline-block;padding-left:0px;">
            <b class="caret" style="border-left: 6px solid transparent; border-right: 6px solid transparent;  border-top: 6px solid #999;"></b>
        </a>
    </span>
    <ul class="dropdown-menu">
        ...
    </ul>
</li>

CSS

.navbar-sam-main .navbar-nav > li >span {
    display: inline-block;
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 20px;
}
.navbar-sam-main .navbar-nav > li >span .navbar-brand {
    padding-top: 0;
    padding-bottom: 0;
}

@media (max-width: 270px) {
    #myContent1 > li.dropdown {
        text-align: center;
    }
    #myContent1 > li.dropdown >ul {
        text-align:left;
    }
}

- omma2289

---

这是完美的答案。谢谢你节省了我的时间。 - trante

Answer 2

我认为你应该使用响应式实用类，带有屏幕宽度断点，例如：

.hidden-sm
.visible-lg

更多信息：http://getbootstrap.com/css/#responsive-utilities

尽量不要覆盖Bootstrap提供的布局机制，并在最初的状态下创建您的布局，然后使用我提到的类覆盖可见性。

- Rafal Pastuszak