Question

我尝试使用bootstrapjs yaml菜单。如何在浏览器窗口调整大小时假装徽标和meny项目为两行？我想要那个正确的顶角＆＃34;汉堡＆＃34;当我调整窗口缩小范围时，显得更早。

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

在yamm菜单中的不同行中的徽标和菜单项

1 个答案: