如何实现navbar-text后换行，导航链接单独成行？

我明白你的需求啦——想要让导航栏里的“lorem Ipsum Dolor”文本之后换行，让所有导航链接单独占一行排列对吧？你之前尝试用display:block没生效，是因为Bootstrap的navbar-nav是flex布局，里面的元素默认是flex items，直接设置display:block不会打破flex的行排列规则，得用flex相关的属性来调整才行。

下面给你两种简单有效的解决方案：

方法一：用Bootstrap自带工具类（推荐） #

直接给navbar-text添加w-100类（这个类会设置元素宽度为100%），让文本占满整行，后面的导航链接就会自动换行到下一行，而且导航链接自身依然保持同行排列，完美符合你的需求。

修改后的代码：

<nav class="navbar navbar-expand-sm navbar-dark ">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">LOREM IPSUM</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="collapsibleNavbar">
      <ul class="navbar-nav ml-auto">
        <!-- 这里添加了w-100类 -->
        <p class="navbar-text w-100">lorem Ipsum Dolor</p>
        <li class="nav-item ">
          <a class="nav-link" href="#">LOREM</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">IPSUM</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">DOLOR</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

方法二：自定义CSS控制 #

如果你需要更灵活的样式控制，可以给navbar-text添加自定义类，利用flex布局的flex-basis属性强制占满整行：

首先添加自定义CSS：

/* 自定义类，用于强制换行 */
.navbar-text-break {
  flex-basis: 100%; /* 让元素占满flex容器的一行 */
  width: 100%; /* 确保在不同屏幕下都能占满宽度 */
}

然后给文本标签应用这个类：

<p class="navbar-text navbar-text-break">lorem Ipsum Dolor</p>

为什么之前的display:block没生效？ #

因为navbar-nav的CSS是display:flex，在flex容器中，子元素的display属性会被忽略（比如block/inline都会被当作flex item处理），所以单纯设置display:block无法让元素换行。必须通过设置元素宽度为100%，或者使用flex布局的属性（比如flex-basis:100%）来强制它占满整行，这样后面的flex items就会自动换行到下一行。

内容的提问来源于stack exchange，提问作者aryanknp