具有动态航向的引导导航
具有动态航向的引导导航
提问于 2019-06-20 02:37:19
我有一个reactJS应用程序，它使用Bootstrap为网站提供导航。设置菜单的容器如下所示：
<div className="container">
<nav className="navbar navbar-light bg-light">
<a className="navbar-brand" href="#">{this.state.planName}</a>
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
{this.renderMenu()}
</nav>
</div>{this.renderMenu()}是我将菜单项动态放置到菜单结构中的位置，这很好用。
{this.state.planName}是一个包含动态字符串的变量，该字符串的长度可以在1到80个字符之间。
我的问题是:当{this.state.planName}的长度相对较短时，菜单结构图标(具有3条水平线的框)会在容器的顶部生成，并在容器中右对齐。但是，当{this.state.planName}的长度相对较长时，菜单结构图标会向下凸起，并在容器中左对齐放置。
如何强制菜单结构图标在容器中始终右对齐，并且只有{this.state.planName}换行？
谢谢!
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56673929
复制相关文章
相似问题