1

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

在此处输入图像描述

但是有一个奇怪的地方变成了这样：

在此处输入图像描述

重现：

  1. 使浏览器的宽度变小。
  2. 展开菜单
  3. 折叠菜单
  4. 让浏览器的宽度再次变大，瞧。

这是菜单：

<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/

4

1 回答 1

0

<nav>Bootstrap 中的 JS 将with 类的盒子模型设置.navbar为高度为 0。

然而，内部<ul>确实保持了正确的高度。<ul>考虑为with class设置样式os_menu。

还...

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

我的建议是在https://github.com/twbs/bootstrap/issues向 Bootstrap 作者提交问题报告

于 2016-06-11T14:26:58.773 回答