如何在导航栏中重叠之前显示汉堡图标

Question

我向导航栏添加了一个新菜单项，但现在当调整较小时，顶部的黄色帐户菜单项（见截图）（HTML 中带有“navbar-right-container”的 div）向下移动到主导航栏。如果我将尺寸调整得更小，汉堡图标就会出现。我希望在顶部菜单项与另一个导航栏重叠之前显示汉堡包图标。下面是 HTML 的 sn-p。我尝试按照其他帖子的建议在正文中添加填充，但这没有用。如何让汉堡包图标在重叠之前显示出来？谢谢。

    <div id="navigation" class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-expand-background">
        &nbsp;
    </div>
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <div class="navbar-brand">
               
            </div>
        </div>
        <div class="navbar-collapse collapse">
            <div class="navbar-middle-container">
                <ul class="nav navbar-nav navbar-middle">
                        <li>
                            <a href="javascript:openModalAction('/Manage/Accounts')" class="navbar-account-switch">
                                <span>Account:<br />My Account</span> <span class="caret caret-right caret-collapsible"></span>
                            </a>
                        </li>
                        <li class="  nobr">
            <a href="/" title="My Dashboard" >
                DASHBOARD
            </a>
            </li>
    <li class=" dropdown nobr">
            <a href="/Quotes" class="dropdown-toggle" data-toggle="dropdown">
                ACCOUNTS
                    <b class="caret caret-collapsible"></b>
            </a>
                        <div class="dropdown-menu dropdown-menu-multicolumn ">
                    <div class="dropdown-menu-head"><div class="dropdown-menu-head-border"></div></div>
                    <table class="table table-condensed">
                        <tr>
                                <td>
                                        <ul class="dropdown-menu-col">
                                            <li class="nobr"><div class="dropdown-menu-col-header">MANAGE</div></li>    

.......................................<div class="navbar-right-container">
                <ul class="nav navbar-nav navbar-right">
                        <li class=" dropdown nobr">
            <a href="/Quotes" title="Manage Account" class="dropdown-toggle" data-toggle="dropdown">
                My name
                    <b class="caret"></b>
            </a>

My Navbar

Answer 1

如果没有一个可行的例子，很难假设。但几乎可以肯定，您应该在 CSS 断点中添加一些。添加 12em 或 200px。或者创建一个全新的断点来专门针对该元素。

您可以使用诸如负边距宽度之类的技巧来抵消新元素对布局的影响。这可能会影响您的点击能力并需要更多规则。