我有一个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}换行?
谢谢!
发布于 2019-06-20 03:38:31
由于您的container
类可能具有display: flex
样式,因此它将尝试提供在其元素内显示每个项目的全部所需的最小空间。因此,当navbar-brand
中的内容太长时,它会将navbar-toggler
按钮推到行之外,以便有足够的空间容纳所有内容(flex)。你最好的选择就是在navbar-brand上设置一些max-width。
尝试以下CSS:
.navbar-brand {
max-width: 250px;
overflow: hidden;
text-overflow: ellipsis;
}
将max-width
调整为所需的外观。
https://stackoverflow.com/questions/56673929
复制相似问题