navbar - 如何在导航栏中重叠之前显示汉堡图标
问题描述
我向导航栏添加了一个新菜单项,但现在当调整较小时,顶部的黄色帐户菜单项(见屏幕截图)(HTML 中带有“navbar-right-container”的 div)向下移动到主导航栏。如果我将尺寸调整得更小,汉堡图标就会出现。我希望在顶部菜单项与另一个导航栏重叠之前显示汉堡包图标。下面是 HTML 的一个片段。我尝试按照其他帖子的建议在正文中添加填充,但这没有用。如何让汉堡包图标在重叠之前显示出来?谢谢。
<div id="navigation" class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-expand-background">
</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>
解决方案
没有一个可行的例子是很难假设的。但几乎可以肯定,您应该在 CSS 断点中添加一些。添加 12em 或 200px。或者创建一个全新的断点以专门针对该元素。
您可以使用诸如负边距宽度之类的技巧来抵消新元素对布局的影响。这可能会影响您的点击能力并需要更多规则。
推荐阅读
- javascript - Firestore:根据地理位置和多对多关系检索数组中不存在的文档
- r - Gpu processing R(如何使用 Gpu 处理在数据集的子集上运行函数)
- javascript - 如何使用户名也出现在另一个用户处?
- openapi - 如何使用两个模式对象定义响应
- php - 如何使用 nginx 反向代理 ssh 到我的远程 docker 容器
- java - 如何在Java中检查100位整数是否为素数?
- scala - Scala 中的延续单子与 Traversables/Observables/Future 有什么联系?
- xcode - 更改 Xcode 项目名称后的错误消息
- react-native - 反应本机 弯入弯出 视图右侧
- android - 工具栏和数据绑定