Bootstrap 4 - 在 sm 或更大尺寸上显示文本，始终显示 FontIcon

Question

在我的选项卡式界面中，我使用 .nav - 我希望 FontIcon 始终显示，但文本仅大于 sm

下图显示了 XS 上的图标，但其他所有显示的是文字

 <li class="nav-item">
     <a class="nav-link active" href="#news" data-toggle="tab">
          <div class="d-sm-none"><i class="fas fa-newspaper" aria-hidden="true"></i></div>
          <div class="d-none d-sm-block">News</div>
     </a>
 </li>

如果我这样做

  <i class="fas fa-newspaper" aria-hidden="true"></i>
  <div class="d-none d-sm-block">News</div>

它导致图标和文本在不同的行上

建议？

Answer 1

简单。您可以 d-sm-inline.

而不是 d-sm-block

<a class="nav-link active" href="#news" data-toggle="tab">
    <i class="fas fa-newspaper"></i>
    <div class="d-none d-sm-inline">News</div>
</a>

演示： https://jsfiddle.net/davidliang2008/5z8jxek2/10/

Bootstrap 4 - 在 sm 或更大尺寸上显示文本，始终显示 FontIcon

Bootstrap 4 - Show Text on sm or bigger, show FontIcon Always

responsive-design

bootstrap-4