Bootstap d-md-block导致导航选项卡中出现带有图标和文本的新行

Question

这个问题很简单，但很难理解。我使用的是BT4导航选项卡，导航项目有一个图标(font真棒(和文本。我想只在移动设备上隐藏文本(空间不足(，但如果我添加"；d-none-d-md-block"；这会在图标和文本之间产生一个新行。

<ul class="nav nav-tabs ">
<li class="nav-item ">
<a class="nav-link active" href="#"><i class="fa fa-users "></i><span 
class="d-none d-md-block">Active</span></a>
</li>
</ul>

如果我删除d-md-block，它会再次回到一行，图标和文本都在同一行。我不知道该怎么做。

ta

Answer 1

因为d-md-block是块元素。您可以使用d-md-inline来代替d-md-block。这将解决你的问题。

<ul class="nav nav-tabs ">
<li class="nav-item ">    
<a class="nav-link active" href="#"><i class="fa fa-users "></i><span 
class="d-none d-md-inline">Active</span></a>
</li>