0

我正在使用 Boostrap 4。我有一个简单的 4 标签水平导航。在大屏幕上，它应该像这样显示：“一些文本 [font-awesome-icon]”x 4 个选项卡。在小屏幕上，它应该像这样显示：“[font-awesome-icon]”。显示部分有效，但是，在大屏幕上，字体真棒图标始终显示在第二行。这是我所看到的；

两行以上的制表符文本

这是我的html；

<!-- Nav tabs -->
<ul class="nav nav-tabs  ">
    
    <!-- profile -->
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#profile" nowr>
            <span class="d-none d-md-block">Some text 
            </span>
            <i class="fas fa-id-card">
            </i>
        </a>
    </li>
    
    <!-- profile image -->
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#profile-image"><i class="fas fa-images"></i></a>
    </li>
    <!-- password -->
    <li class="nav-item">
      <a class="nav-link active" data-toggle="tab" href="#password"><i class="fas fa-unlock-alt"></i></a>
    </li>
    <!-- timezone --> 
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#timezone"><i class="fas fa-clock"></i></a>
    </li>
</ul>

我在 UL、LI、A、SPAN 等所有位置都尝试过 nowrap，但没有运气。但是，我还将 fa-clock 部分移到了跨度内，然后整个文本和选项卡在小屏幕上消失了。

任何帮助表示赞赏。

4

1 回答 1

1

要停止让您的身份证移动到下一行，请将您的“一些文字”浮动到左侧。

    <li class="nav-item" >
        <a class="nav-link" data-toggle="tab" href="#profile" nowr>
            <span style="float:left;" class="d-none d-md-block">Some text 
            </span>
            <i  class="fas fa-id-card">
            </i>
        </a>
    </li>
于 2021-07-04T04:33:58.410 回答