Bootstrap 4 - 移动设备上的Navbar标题

Question

我正在使用新的Bootstrap 4设置一个网站，因为不幸有一个很长的名称，导致我在导航栏中显示此名称时遇到问题。如下图所示，长名称导致打开导航选项的汉堡按钮（三行事物）已经下降到第二行。由于与Scrollspy相关的复杂问题，我需要防止这种情况，以确保导航栏的高度与设备屏幕大小无关。有没有一种方法可以防止这种情况发生，或者设置手机有一个不同的短标题文本，如“网页名称”，这将允许名称适合旁边的汉堡按钮。我知道这是可能的自举3，但是，我无法找到引导工作的替代4.

<nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top" id="main-nav-bar"> 
     <a class="navbar-brand" href="#home"> 
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/SNice.svg/1200px-SNice.svg.png" class="navbar-sqnlogo d-inline-block align-top">Annoying Long Webpage Name</a> 
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> 
      <span class="navbar-toggler-icon"></span> 
     </button> 
     <div class="collapse navbar-collapse" id="navbarNav"> 
      <ul class="navbar-nav ml-auto"> 
       <li class="nav-item"><a class="nav-link" href="#home">Home</a></li> 
       <li class="nav-item"><a class="nav-link active" href="#about" id="aboutlink">About</a></li> 
       <li class="nav-item"><a class="nav-link" href="#whatwedo">What We Do</a></li> 
       <li class="nav-item"><a class="nav-link" href="#join">Join</a></li> 
      </ul> 
     </div> 
    </nav> 

Answer 1

这里是我发现引导V4-β的解决方案：

<!-- Navbar --> 
<nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top" id="main-nav-bar"> 
    <a class="navbar-brand" href="#home"> 
     <img src="img/logo.png" class="navbar-sqnlogo d-inline-block align-top"> 
     Long <span class="d-none d-md-inline">Web Page </span>Name 
    </a> 
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> 
     <span class="navbar-toggler-icon"></span> 
    </button> 
    <div class="collapse navbar-collapse" id="navbarNav"> 
     <ul class="navbar-nav ml-auto"> 
      <li class="nav-item"><a class="nav-link" data-toggle="collapse" data-target="#navbarNav" href="#home">Home</a></li> 
      <li class="nav-item"><a class="nav-link" data-toggle="collapse" data-target="#navbarNav" href="#about" id="aboutlink">About</a></li> 
      <li class="nav-item"><a class="nav-link" data-toggle="collapse" data-target="#navbarNav" href="#whatwedo">What We Do</a></li> 
      <li class="nav-item"><a class="nav-link" data-toggle="collapse" data-target="#navbarNav" href="#join">Join</a></li> 
     </ul> 
    </div> 
</nav 

仅供参考，类d-*-*做到这一点。

Answer 2

您可以隐藏/使用hidden-显示较长和较短的名称根据屏幕大小应用于img标签的sm-up和隐藏sm-down类。

我会通过创建两个不同的img标签做到这一点：

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/SNice.svg/1200px-SNice.svg.png" class="navbar-sqnlogo d-inline-block align-top hidden-sm-down">Annoying Long Webpage Name</a> 

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/SNice.svg/1200px-SNice.svg.png" class="navbar-sqnlogo d-inline-block align-top hidden-sm-up">Shorter Name</a> 

这样，当页面中移动，长标题会隐藏，而较短的人会出现。