带动态标题的Bootstrap导航

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (139)

我有一个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}换行?

谢谢!

提问于
用户回答回答于

由于您的container类可能具有display: flex样式,因此它将尝试提供在其元素内显示每个项目的整体所需的最小空间。因此,当内容navbar-brand过长时,它会将navbar-toggler按钮推到行外,这样它就有足够的空间来容纳所有内容(flex)。你最好的选择就是在navbar-brand上设置某种最大宽度。

尝试以下CSS:

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

调整max-width到您想要的外观。

扫码关注云+社区

领取腾讯云代金券