Question

我有一个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}？

谢谢！

Answer 1

由于您的container类可能具有display: flex样式，因此它将尝试提供必要的最小空间以显示元素内部每个项目的整体。因此，当navbar-brand中的内容太长时，它将navbar-toggler按钮推到行外，以便有足够的空间容纳所有内容（弹性）。最好的选择实际上只是在navbar-brand上设置某种最大宽度。

尝试以下CSS：

.navbar-brand {
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
}

将max-width调整为所需的外观。

具有动态标题的自举导航

1 个答案: