Question

我有一个这样的菜单（bootstrap 4 alpha 2）：

但有一件奇怪的事情就是这样：

重现：

使浏览器的宽度变小。
展开菜单
折叠菜单
再次使浏览器的宽度变大，瞧。

这是菜单：

<div class="menu-root">
        <div class="container">

            <div id="menu" class="col-xs-12 col-md-6 col-lg-4">

                <nav class="navbar navbar-dark bg-inverse" style="background: transparent">

                    <button class="navbar-toggler hidden-md-up collapsed" type="button" data-toggle="collapse" data-target="#collapsingNavbar" aria-expanded="false">
                        <span class="so_menu_name">The Protagonist</span>
                    </button>

                    <div class="navbar-toggleable-sm collapse" id="collapsingNavbar">

                        <ul class="nav navbar-nav os_menu">

                            <li class="nav-item"><a class="nav-link" href="http://localhost:8888/so/wordpress/watch-the-trailer/">Watch the Trailer</a></li>
                            <li class="nav-item"><a class="nav-link" href="http://localhost:8888/so/wordpress/screenings-events/">Screenings &amp; Events</a>
                            </li><li class="nav-item"><a class="nav-link" href="http://localhost:8888/so/wordpress/synopsis/">Synopsis</a></li>
                            <li class="nav-item"><a class="nav-link" href="http://localhost:8888/so/wordpress/the-protagonist/">The Protagonist</a></li>
                            <li class="nav-item"><a class="nav-link" href="http://localhost:8888/so/wordpress/the-filmmakers/">The Filmmakers</a></li>
                            <li class="nav-item"><a class="nav-link" href="http://localhost:8888/so/wordpress/contact-credits/">Contact &amp; Credits</a></li>
                            <li class="nav-item"><a class="nav-link" href="http://localhost:8888/so/wordpress/press/">Press</a></li>
                            <li class="nav-item"><a class="nav-link" href="http://localhost:8888/so/wordpress/support-our-crowdfunding-campaign/">Support our Crowdfunding</a></li>

                        </ul>

                    </div>

                </nav>

            </div>
        </div>

    </div>


html, body {
    height: 100%;
    width: 100%;
    margin:0;
}

body {
    background-color: black !important;
}

* {
    color: white;
}

#menu {
    padding-top: 20px;
}


.nav.navbar-nav .nav-item {
    float: none;
}
.nav.navbar-nav .nav-item+.nav-item {
    margin-left: 0;
}
.nav.navbar-nav .nav-link {
    padding: .25rem 0;
}

.navbar {
    border-top: 2px solid white;
    border-bottom: 2px solid white;
}

#menu button{
    display: block;
}

#menu hr {
    /*box-sizing: border-box;*/
    margin-left: -16px;
    margin-right: -16px;
    color: white;
    border-color: white;
    background-color: white;
    border: 0 none;
    height: 2px;
}

#menu * {
    font-family: sans-serif;
    color: white;
    font-size: 14px;
    letter-spacing: 1px;
    line-height: 18px;
}

a {
    color: rgb(255,236,189);
}

a:hover {
    color: rgb(255,236,189);
}


textarea:focus, input:focus{
    outline: none;
}
button:focus {
    outline:0;
}

.menu-root {
    z-index: 50;
}

为方便起见：https://jsfiddle.net/clankill3r/efzsubtr/

Answer 1

Bootstrap中的JS将<nav>的框.navbar的框模型设置为高度0。

然而，内<ul>确实保持正确的高度。考虑使用类<ul>为os_menu设置样式。

也...

由于TWBS4在ALPHA中，因此在此处更正的任何建议很可能会在发布后导致不同的行为。

我的建议是在https://github.com/twbs/bootstrap/issues

向Bootstrap作者提交问题报告

引导菜单上的奇怪行为

1 个答案: