jquery - Twitter Bootstrap 3 导航栏折叠

Question

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

“myContent1”和“myContent2”将始终可见。“myContent3”将在小屏幕上折叠。但是，当我单击小屏幕设备中的堆叠按钮时，折叠的菜单不会打开。单击按钮时没有任何反应。

我把它变成了小提琴：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 and right:0绝对样式。但在那种情况下，如果屏幕很小，就会myContent2渗透到按钮中。你可以从这里看到这种行为：http: //jsfiddle.net/mavent/paXt9/2/

Edit2：我需要这种行为：

对于大屏幕，一切都是可见的。

对于较小的屏幕，myContent2是可见的，myContent3是折叠的。myContent3如果单击按钮，则未折叠。

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

Answer 1

下拉元素占据了整个导航栏宽度并阻止按钮工作，要解决问题，您可以为品牌链接和导航栏切换按钮设置更高的 z-index：

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

对于评论部分提出的其他问题，修复方法是将下拉链接和插入符号包装在一个跨度中，使它们包装为单个元素，并使用媒体查询使链接显示在中心落在第二行：

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;
    }
}

Answer 2

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

.hidden-sm
.visible-lg

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

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