導航欄摺疊時顯示圖像

-1

我正在使用Bootstrap3。我有一個帶有徽標的navbar，但我只想在摺疊navbar時顯示徽標。我有太多的下拉菜單，所以當navbar未摺疊時，徽標不適合（也不好看）。導航欄摺疊時顯示圖像

我原本是visible-xs類，但我有我的導航欄上的自定義崩潰點，所以這不會正確隱藏徽標。

只有當navbar摺疊時，纔有方法顯示圖像嗎？

<nav class="navbar navbar-default navbar-static-top"> 
     <div class="container"> 
      <div class="navbar-header"> 
       <div class="row"> 
        <div class="col-xs-4"> 
         <a href="#" class="navbar-left"><img src="Images/Logo_small.gif"></a> 
        </div> 
        <div class="col-xs-8"> 
         <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
          <span class="sr-only">Toggle navigation</span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
         </button> 
        </div> 
       </div> 
      </div>

來源

2016-08-24 Holt

哪裏是你的導航品牌？無論如何，只需添加visible-xs，它應該可以很好地工作...... – Lee

@Lee - 就像我說過的...我有一個自定義的崩潰點，因此我不能只在其中添加'visible-xs'。我試圖找到一種方法，只在應用導航欄的摺疊版本時才顯示我的徽標。 – Holt

您有使用自定義崩潰點的原因嗎？因爲我認爲使用默認的BS點會讓它容易得多，而且我認爲它對大多數人來說都是可以的。只是好奇而已。 – Lee

-1

1理解： 如果您希望您的標誌消失時，菜單消失，其漢堡包版本顯示方式，而不使用BS默認類visible-xs你提到，你可以添加CSS媒體一些CSS規則查詢

@media (min-width: custom collapse point-min) and (max-width: custom collapse point-max) { 
    .navbar-collapse { 
     .logotohide { display: none; } // or opacity: 0 or whatever 
    } 
}

所以，如果自定義點是相同的collasping和標誌隱藏，這將做這項工作。

第2次瞭解： 通常情況下，當您打開它時，您的導航欄會有一個新類（帶有responsiv漢堡包菜單圖標）。然後，您可以簡單地使用css來隱藏具有此特定類的導航欄的元素。

例如：

.navbar-collapse.collapse { 
     .logotohide { display: none; } // or opacity: 0 or whatever 
     // using LESS 
     &.in { .logotohide { display: block; } } 
    } 
    // without LESS 
    .navbar-collapse.collapse.in { 
     .logotohide { display: block; } // or opacity: 1 or whatever 
    }

當你的導航欄會的，因爲它的摺疊狀態的新類，第二CSS規則將採取的力量！

來源

2016-08-24 15:08:16

太好了，謝謝你的回答！原諒我缺乏CSS體驗......但它不喜歡navbar/navbar.collapse部分內的'.logotohide'部分的格式。我只是想念一些簡單的東西？ – Holt

實際上，當崩潰時，我沒有看到新的類正在應用於導航欄。我不認爲這種方法可行。 – Holt

看起來更難......例如在父母的div中。或者只是使用bootstrap如何使用它，我已經想讓你嘗試多次。但是當人們試圖幫助你時，這並不是一個理由。 –

導航欄摺疊時顯示圖像

回答

相關問題