Bootstrap导航链接文本不显示原因咨询

嘿，我一眼就瞅出问题啦！你的导航文本之所以不显示，罪魁祸首是包裹文本的<span>标签上的**d-none d-lg-inline-block**类组合——这是Bootstrap的响应式工具类，作用是：

• d-none：默认状态下（屏幕宽度小于992px，也就是Bootstrap定义的lg断点以下）完全隐藏这个元素
• d-lg-inline-block：只有当屏幕宽度达到lg及以上（≥992px）时，才会让这个元素以行内块级元素显示

所以如果你的浏览器窗口宽度不够大，文本自然就被藏起来了。

解决方法分两种情况： #

1. 希望文本在所有屏幕尺寸下都显示 #

直接移除这两个响应式类，把文本直接放在<a>标签里（或者保留span但去掉类）就行：

<ul class="nav nav-pills bg-light-gray" role="tablist">
  <li class="">
    <a class="nav-link active" href="#tab1" data-toggle="tab" role="tab">
      tab 1
    </a>
  </li>
  <li class="disabled">
    <a class="nav-link" href="#tab2" data-toggle="tab" role="tab">
      tab 2
    </a>
  </li>
  <li class="disabled">
    <a class="nav-link" href="#tab3" data-toggle="tab" role="tab">
      tab 3
    </a>
  </li>
</ul>

2. 想保留响应式逻辑，但调整显示规则 #

如果只是想在小屏幕也显示文本，或者需要在不同断点切换显示内容，可以替换响应式类。比如想要在手机上显示缩写、大屏幕显示完整文本，就可以这么写：

<a class="nav-link active" href="#tab1" data-toggle="tab" role="tab">
  <span class="d-inline-block d-lg-none">T1</span> <!-- 小屏幕显示缩写 -->
  <span class="d-none d-lg-inline-block">tab 1</span> <!-- 大屏幕显示完整文本 -->
</a>

这样就能灵活适配不同屏幕尺寸的显示需求啦！

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