<分区>
我想使用 Twitter Bootstrap 来布局我的导航栏，以便它有“左”、“中”和“右”部分，其中中间部分在 navbar-toggler 下折叠(“汉堡菜单”)当空间不足时。
独立示例的 Codepen:https://codepen.io/fiver/pen/eKJOMG
我错误的部分(我认为)是“图标”元素的定义:
<nav className="navbar navbar-expand-sm navbar-dark bg-dark ">
<a className="navbar-brand" href="#">ExampleApp</a>
<button className="navbar-toggler" type="button"
data-toggle="collapse"
data-target="#navbarNav" >
<span className="navbar-toggler-icon"/>
</button>
<a className="navbar-brand navbar-right" href="#">Icon1</a>
<div id="navbarNav" className="collapse navbar-collapse" >
<ul className="navbar-nav">
<li nav items></li>
....
</ul>
</div>
<a className="navbar-brand navbar-right" href="#">Icon2</a>
</nav>
当有足够的水平空间不需要导航栏切换时，Icon1在错误的地方:
但是当navbar-toggler处于事件状态，菜单已展开，Icon2在错误的地方:
目前，我只打算拥有 Icon 之一我的应用程序中的菜单项。我只是在这里使用两个来说明将图标放在两个不同位置时的不同行为。
请注意，当 navbar-toggler 时，这两个展示位置似乎都按照我想要的方式工作菜单处于事件状态，但已折叠:
我需要做什么才能使图标像 Icon2 一样当有很多空间时navbar-toggler和 Icon1当空间受限时？