Bootstrap 4.5页脚文本换行问题：如何实现大屏下文本单行显示

当然可以解决这个问题！我来帮你分析下原因并给出具体的修复方案：

问题原因 #

你给外层容器加了container-fluid d-flex justify-content-center，这会让内部的row变成flex布局的子元素，默认情况下它不会自动占满父容器的全部宽度。这样一来，三个col-lg-4的可用空间被压缩，哪怕页面有足够宽度，文本也会因为列宽不足而换行。

修复方案 #

方案1：给row添加宽度占满类 #

给内部的row加上w-100类，让它占满父容器的宽度，这样三个col-lg-4就能各自获得1/3的页面宽度，内容自然有足够空间保持单行：

<div class="container-fluid d-flex justify-content-center">
  <div class="row w-100">
    <!-- 你的三个列内容 -->
  </div>
</div>

方案2：改用container替代container-fluid + flex #

如果你希望页脚内容在大屏下保持居中且宽度固定（这也是很多网站页脚的常见做法），可以直接去掉外层的flex设置，改用container类（它本身在大屏下是居中的固定宽度容器），这样网格系统能正常发挥作用：

<div class="container">
  <div class="row">
    <!-- 你的三个列内容 -->
  </div>
</div>

额外优化：强制文本不换行 #

如果某些长文本还是有换行风险，可以给包含文本的元素加上text-nowrap类，强制内容保持单行：

<span class="text-nowrap"><i class="fa fa-chevron-right pr-2"></i>some text some text sometext sometextsome text</span>

修改后的完整页脚代码示例 #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<div class="container-fluid d-flex justify-content-center">
  <div class="row w-100">
    <div class="col-lg-4 col-md-6 col-12 pb-5">
      <h4 class="text-center">some text</h4>
      <div class="d-flex justify-content-between align-items-center">
        <a href="#" data-toggle="collapse" data-target="#footer_ups" aria-expanded="false" aria-controls="footer_ups">
          <span class="text-nowrap"><i class="fa fa-chevron-right pr-2"></i>some text some text sometext sometextsome text</span>
        </a>
        <span class="badge badge-primary badge-pill">7 <i class="fa fa-caret-down"></i></span>
      </div>
      <div id="footer_ups" class="collapse pl-3" aria-labelledby="some text">
        <ul class="list-unstyled">
          <li><i class="fa fa-angle-right pr-2"></i> <a href="" alt="" target="_blank">some text</a></li>
          <li><i class="fa fa-angle-right pr-2"></i> <a href="" alt="" target="_blank">some text</a></li>
          <li><i class="fa fa-angle-right pr-2"></i> <a href="" alt="" target="_blank">some text</a></li>
        </ul>
      </div>
      <div class="d-flex justify-content-between align-items-center">
        <a href="#" data-toggle="collapse" data-target="#footer_ipp" aria-expanded="false" aria-controls="footer_ipp">
          <span class="text-nowrap"><i class="fa fa-chevron-right pr-2"></i>some text sometextsome text</span>
        </a>
        <span class="badge badge-primary badge-pill">4 <i class="footer_ipp_glyph fa fa-caret-down"></i></span>
      </div>
      <div id="footer_ipp" class="collapse pl-3" aria-labelledby="some text">
        <ul class="list-unstyled">
          <li><i class="fa fa-angle-right pr-2"></i> <a href="" alt="" target="_blank">some text</a></li>
          <li><i class="fa fa-angle-right pr-2"></i> <a href="" alt="" target="_blank">some text</a></li>
          <li><i class="fa fa-angle-right pr-2"></i> <a href="" alt="" target="_blank">some text</a></li>
        </ul>
      </div>
      <br />
      <span class="text-nowrap"><i class="fa fa-chevron-right pr-2"></i><a href="" target="_blank">some textsome textsome textsome texttextsome textsome text</a></span>
    </div>
    <div class="col-lg-4 col-md-6 col-12 pb-4">
      <h4 class="text-center">Aide et Informations légales</h4>
      <ul class="list-unstyled">
        <li><i class="fa fa-angle-right pr-2"></i> <a href="" alt="" target="_blank">some text</a></li>
        <li><i class="fa fa-angle-right pr-2"></i> <a href="" alt="" target="_blank">some text</a></li>
        <li><i class="fa fa-angle-right pr-2"></i> <a href="" alt="" target="_blank">some text</a></li>
        <li><i class="fa fa-angle-right pr-2"></i> <a href="" alt="" target="_blank">some text</a></li>
      </ul>
    </div>
    <div class="col-lg-4 col-md-12 text-center">
      <h4 class="text-center">Suivez-nous</h4>
      <a href="" target="_blank"><i class="fa fa-facebook-square fa-3x mr-3"></i></a>
      <a href="" alt="" target="_blank"><i class="fa fa-twitter-square fa-3x mr-3"></i></a>
      <a href="" alt="" target="_blank"><i class="fa fa-linkedin-square fa-3x mr-3"></i></a>
      <a href="" alt="" target="_blank"><i class="fa fa-instagram fa-3x"></i></a>
    </div>
  </div>
</div>

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