html - yamm 菜单中不同行的 Logo 和菜单项

Question

我尝试使用 bootstrapjs yaml 菜单。如何在浏览器窗口调整大小时假装 Logo 和菜单项变成两行？我希望在调整窗口大小以缩小时右上角的“汉堡包”出现得更早。

<header>
    <nav class="navbar yamm navbar-fixed-top headerBg headerText" id="heading">
        <style>@media (min-width: 767px) { .dropdown:hover .dropdown-menu { display: block; } }</style>
        <div class="container">
            <div class="navbar-header">
                <button type="button" data-toggle="collapse" data-target="#navbar-collapse-1" class="navbar-toggle">
                    <span class="icon-bar" style="height:3px;"></span>
                    <span class="icon-bar" style="height:3px"></span>
                    <span class="icon-bar" style="height:3px"></span>
                </button>
                <a href="#" class="navbar-brand">
                    <div style="background: transparent url('img/logo.png') no-repeat scroll center center;background-size: contain;width:100px;height:25px;"></div>
                </a>
            </div>
            <div id="navbar-collapse-1" class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <?php for($i = 1; $i < 12; $i++):?>
                    <li class="dropdown">
                        <a href="#" class="headerText">Item <?php echo $i;?></a>
                    </li>
                    <?php endfor;?>
                </ul>
            </div>
        </div>
    </nav>
</header>

谢谢

Answer 1

看来你需要一点 CSS 来管理它，它可能看起来像那样

@media only screen and (min-width: MORE_EARLIER_PIXELS) {
     .dropdown-menu, .navbar-collapse.in {
         display: block; 
    }

    .navbar-collapse{
       display:none; 
    }
}