Bootstrap 4，CSS - 在选项卡菜单上隐藏文本答案

【问题标题】：Bootstrap 4, CSS - Hide Text on a tab menuBootstrap 4，CSS - 在选项卡菜单上隐藏文本
【发布时间】：2021-04-29 06:36:18
【问题描述】：

我有一个 CSS 问题，将文本隐藏在我的侧边菜单中，并将字体很棒的图标留在移动视图上，我想不出任何合理的解决方案。我使用引导程序 4

然后是我的侧边栏菜单的代码

<div class="sidebar">
  <a class="active" href="#Link0"><i class="fas fa-walking"></i> Link0</a>
  <a href="#link1"><i class="fas fa-users"></i> Link1</a>
  <a href="#link2"><i class="fas fa-cog"></i> Link2</a>
  <a href="#link3"><i class="fas fa-headset"></i> Link3</a>
</div>

根据引导手册，我应该能够使用class="d-SM-none d-MD-block" 隐藏任何合适标签之间的任何元素。我的问题是我希望左侧的图标在移动视图中保持可见并隐藏文本但是当我将文本放在<div> 标签之间时，文本总是出现在图标下方的一行。我尝试了<i> <p> 标签，但仍然是同样的问题，顺便说一句，文本并没有隐藏：D 欢迎任何帮助！

我尝试过但没有成功：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />

<div class="sidebar">
  <a class="active" href="#Link0"><i class="fas fa-walking"></i> <div class="d-sm-none d-md-block">Link0</div></a><!--Text is one line down from icon-->
  <a href="#link1"><i class="fas fa-users"></i><p class="d-sm-none d-md-block"> Link1</p></a><!--Text is one line down from icon-->
  <a href="#link2"><i class="fas fa-cog"></i> Link2</a>
  <a href="#link3"><i class="fas fa-headset"></i> Link3</a>
</div>

【问题讨论】：

对不起，我的英语不太好，这有点令人困惑......主要的想法是让图标和文本像其他链接 2 和 3 一样彼此相邻，这是主要问题

标签： html css twitter-bootstrap bootstrap-4

【解决方案1】：

隐藏部分工作正常，问题是您尝试添加一些默认显示为块的元素（div，p）因此将其替换为span。

然后不要使用 d-md-block 类，因为您在 a 中具有默认 display: inline。所以你应该使用d-md-inline类。

结果：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />

<div class="sidebar">
  <a class="active" href="#Link0"><i class="fas fa-walking"></i> <span class="d-sm-none d-md-inline">Link0</span></a><!--Text is one line down from icon-->
  <a href="#link1"><i class="fas fa-users"></i><span class="d-sm-none d-md-inline"> Link1</span></a><!--Text is one line down from icon-->
  <a href="#link2"><i class="fas fa-cog"></i> Link2</a>
  <a href="#link3"><i class="fas fa-headset"></i> Link3</a>
</div>

【讨论】：