如何配置Bootstrap4 navbar，组件过多时自动折为两行或多行展示？

开发者阿泽

2026-10-21

Bootstrap4 导航栏溢出自动换行解决方案

实现原理

Bootstrap4默认的navbar导航栏使用flex布局，且强制设置了不换行属性，导航项过多时会出现溢出。我们仅需要修改flex布局的换行规则即可实现自动折行效果。

方案1：使用Bootstrap内置工具类（无需额外写CSS）

直接给导航容器和导航列表添加Bootstrap自带的flex-wrap换行类即可，修改后的完整代码如下：

<nav class="navbar navbar-expand-md navbar-light bg-light" role="navigation">
    <div class="container">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div id="navbarCollapse" class="collapse navbar-collapse flex-wrap">
            <ul class="navbar-nav flex-wrap" runat="server" id="navbar">
                <li class="nav nav-item dropdown">
                    <a class="nav-link dropdown-toggle" runat="server" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="#">INICIO</a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown" runat="server" id="div_inicio_dropdown">
                        <a class="dropdown-item" href="Home.aspx">HOME</a>
                        <a class="dropdown-item" id="cmd_menu_mesas" runat="server" href="ComandaMesa.aspx">MESAS</a>
                        <a class="dropdown-item" href="ComandaMesaAberta.aspx?mes=0">COMANDAS ABERTA</a>
                    </div>
                </li>
                <!-- 其他动态生成的导航项 -->
            </ul>
        </div>
    </div>
</nav>

方案2：自定义CSS（需要额外添加样式）

如果需要更精细控制换行后的间距等样式，可以添加自定义CSS：

/* 导航容器开启换行 */
.navbar-collapse {
    flex-wrap: wrap;
}
/* 导航列表开启换行 */
.navbar-nav {
    flex-wrap: wrap;
}
/* 可选：调整导航项间距，换行后更美观 */
.navbar-nav .nav-item {
    margin: 0.2rem 0.4rem;
}