NavBar Bootstrap 4，如何不重复隐藏手机屏幕中的某些项目？答案

【问题标题】：NavBar Bootstrap 4, how not to hide some items in mobile screens without duplication?NavBar Bootstrap 4，如何不重复隐藏手机屏幕中的某些项目？
【发布时间】：2020-08-27 11:24:05
【问题描述】：

就像在 Bootstrap 4 导航栏中一样，不是用适配器隐藏一些点吗？也就是说，宽度为 1200 像素时，您需要隐藏除两个点之外的所有点，而不会重复。如何做到这一点？

我找到了一个应该如何工作的示例，但我不明白您如何使用 Bootstrap 来做到这一点。

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

代码导航栏引导程序 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 属性。 getbootstrap.com/docs/4.0/utilities/display 每当您想在移动设备上隐藏某些内容时，只需在其上添加类即可。
d-block 没有帮助
你不仅需要使用d-block，例如在sm（就像移动设备）上隐藏它们，你需要使用d-none d-sm-block
导航栏收起时您希望哪些元素保持可见？
@Tiramonium 在我附加的代码中，适配器中有一个单词“Leave”，其余的应该被隐藏。 codepen.io/moiseev1788/pen/eYZvxbG

标签： html jquery css twitter-bootstrap

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

<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。

【讨论】：

试过你的解决方案，它不起作用。这是codepen的代码codepen.io/moiseev1788/pen/eYZvxbG
try class= 'd-md-block d-sm-none' 它的作用是在中到大和超大屏幕上保持可见，并在小屏幕上隐藏。希望这会有所帮助。
'd-md-block' 表示该项目一旦达到“中等”屏幕尺寸就会开始显示，并且会一直显示到“超大屏幕尺寸”

【解决方案3】：

如果您希望在平板电脑尺寸或更小的尺寸上隐藏它，您应该在 <li> 上使用 d-block d-md-none。您也可以将其更改为您想要的任何内容，只需将 md 换出并使用其他内容即可。以下是您可以使用的列表：https://getbootstrap.com/docs/4.0/utilities/display/#hiding-elements

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

<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>

【讨论】：

【解决方案4】：

要做你想做的事，你必须在你的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>

【讨论】：