NavBar Bootstrap 4，如何不重复地在移动屏幕中隐藏某些项目？

问题描述

就像在Bootstrap 4导航栏中一样，是否不使用适配器隐藏某些点？也就是说，宽度为1200像素时，您需要隐藏除两点以外的所有点，且不能重复。该怎么办？

我找到了一个如何工作的示例，但是我不明白如何使用Bootstrap。

示例https://jsfiddle.net/abhitalks/y0ypz38w

代码Navbar Bootstrap 4

<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZonixN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

<!-- JS,Popper.js,and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar w/ text</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarText">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Leave </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Leave </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
    </ul>
  </div>
</nav>

解决方法

您可以在display等项目上使用d-none属性，如果要隐藏小屏幕上的“主页”项目，则可以使用类似以下内容：

<li class="nav-item active d-block d-sm-none">
  <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>

这里d-block适用于所有屏幕尺寸，当您点击小尺寸时，d-sm-none将起作用，并且将隐藏您的nav-item。

class="d-none d-sm-block"

您可以将sm更改为所需的断点。这将使所有超出该断点的内容都可见

如果希望隐藏在Tablet尺寸或更小的平板电脑上，请在d-block d-md-none上使用<li>。您也可以将其更改为所需的任何内容，只需换掉md并使用其他功能。以下是您可以使用的清单：https://getbootstrap.com/docs/4.0/utilities/display/#hiding-elements

要隐藏平板电脑尺寸上的“剩余”，您只需要在d-block d-md-none上添加<li>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar w/ text</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarText">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item d-none d-md-block">
        <a class="nav-link" href="#">Leave</a>
      </li>
      <li class="nav-item"">
        <a class="nav-link" href="#">Pricing</a>
      </li>
    </ul>
  </div>
</nav>

要执行所需的操作，您必须在navbar-brand上插入这些链接。

这看起来可能并不整洁，但是可以为您提供您想要的功能。

此外，您可能要重新考虑在折叠导航栏时使3个链接可见。在较小的(sm)断点（420px）上可能最多保留2个，在中等(md)的断点（768px）上最多3个可见的

编辑：考虑到这样做的方法，您可以仅建立3个navbar-brand链接而不是1个链接，然后将第三个链接设置为仅在不破坏布局的断点处显示，无论是中小型的。

<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

<!-- JS,Popper.js,and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">
    Navbar brand
  </a>
  <a class="navbar-brand" href="#">
    Leave #1
  </a>
  <a class="navbar-brand d-none d-md-inline" href="#">
    Leave #2
  </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarText">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
    </ul>
  </div>
</nav>

html jquery twitter-bootstrap