Bootstrap：在小屏幕上删除导航栏品牌，fe mobile

Question

我网站上的导航栏（请参阅代码块）在移动设备上会扩展高度（因为它并不都适合 1 行）。 我注意到，如果我删除该品牌，它就适合。 然而，当在大屏幕上时，我想保留这个品牌。 我怎样才能让它只在小屏幕（移动设备）上消失并留在电脑屏幕上？

谢谢！

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <!-- Brand/logo -->
  <a class="navbar-brand custom-brand" href="#">Logo</a>
  
  <!-- Links -->
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Link 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 3</a>
    </li>
  </ul>
</nav>

我尝试将其添加到我的 css 中，但这只会切断我品牌的一半以使其适合，我认为这比仅仅摆脱整个事情更难看。

 .custom-brand{
    overflow: hidden;
  }

Answer 1

请参阅 Bootstrap 4.0 文档： 隐藏元素

要隐藏元素，只需对任何响应式屏幕变化使用.d-none class 或.d-{sm,md,lg,xl}-none类之一。

要仅在给定的屏幕尺寸间隔上显示元素，您可以将一个.d-*-none class 与一个.d-*-* class 组合，例如.d-none.d-md-block.d-xl-none将隐藏所有屏幕尺寸的元素，除了中型和大型设备。

Answer 2

你可以做的是添加一个 class，例如，将桌面作为类名，我们正在使用媒体查询来实现这一点。 它现在将仅显示在宽度超过 500 像素的屏幕上。

 <style> @media screen and (max-width: 500px){.desktop{ display: none;important; } } </style> <a class="navbar-brand custom-brand desktop" href="#">Logo</a>