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> 

這樣，當頁面中移動，長標題會隱藏，而較短的人會出現。