如何在Bootstrap中僅顯示摺疊導航欄上的文本？

我想要顯示導航欄上顯示的導航欄切換按鈕旁邊的電話號碼。切換按鈕僅在導航欄處於摺疊狀態時纔會出現。我希望文字出現在旁邊。如何在Bootstrap中僅顯示摺疊導航欄上的文本？

這是我現在有：

collapsed navbar

這裏就是我想實現：從相關的div

collapsed navbar with text

HTML：

<div class="header-centered"><img src="http://placehold.it/350x150"></div> 
    <div class="navbar"> 
     <div class="navbar-inner"> 
     <div class="container"> 
      <!-- .btn-navbar is used as the toggle for collapsed navbar content --> 
      <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
       <!-- Everything you want hidden at 940px or less, place within here --> 
      <div class="nav-collapse collapse"> 
       <ul class="nav"> 
      <li class="active"><a href="#">Home</a></li> 
      <li><a href="#">Link1</a></li> 
      <li><a href="#">Link2</a></li> 
      <li><a href="#">Link3</a></li> 
      <li><a href="#">Link4</a></li> 
      <li><a href="#">Link5</a></li> 
      </ul> 
     </div> 
     </div> 
     </div> 
    </div>

我不想要文字除非導航欄被摺疊纔出現。這怎麼能實現？

來源

2013-02-20 Tom Brossman

您可以通過CSS控制你的文本的可見性，這樣的事情：

.abcde .text { 
    display: none; 
} 
.abcde.collapse .text { 
    display: inline-block; 
}

來源

2013-02-20 20:17:50

這裏.abcde是什麼？原因我沒有看到任何動態添加.collapse – 2016-09-29 12:59:23

此答案完全沒有引導上下文。 – Mark 2017-12-05 22:17:29

有太多的方式來處理這種情況。

Display: none;這是一個瀏覽器友好的，他們不再承擔任何因素，因爲它處於永久隱藏狀態。
Visibility: hidden;它可以隱藏文檔中的任何元素，但仍然存在限制，瀏覽器必須在頁面上找到該元素，然後隱藏該元素。所以幾毫秒，但他們必須工作一點來隱藏這一點。
通過保持font-size: 0;和摺疊狀態後使用font-size: 1em;。
保留opacity: 0及更高版本opacity: 1。
postion: absolute;left:-99999em;和後來left:0;
您可以使用z-index的，如果你已經定位的元素。按順序堆疊元素也可以。

因此，最後有一大堆方法來隱藏和顯示文檔上的元素。無論你選擇什麼，這都取決於你。但據我所知Display: none;是您的項目中最好的一個。

來源

2013-02-23 05:48:30

我搜索的答案，這是我做過什麼 - 你想要的文字

<div class="navbar-inner"> 
    <div class="container-fluid"> 
    <a class="btn btn-navbar btn-block" data-target=".navbar-inverse-collapse" data-toggle="collapse"> 
    <span class="icon icon-white icon-align-justify"></span> MENU</a> 
    <div class="nav-collapse collapse navbar-inverse-collapse"> 
    <ul class="nav">

來源

2013-06-06 09:23:49

易於更換菜單 - 只是「漢堡按鈕」

<p class="navbar-text visible-xs-inline-block">Menu</p>

前添加以下的HTML然後設計它以適應。

p.navbar-text { 
    font-size: 22px; 
    margin-top: 8px; 
    padding-bottom: 0; 
    text-align: right; 
    width: 70%; 
}

來源

2015-08-20 06:47:14 user2011075

我加入這個答案是要使用的使用網格浮動斷點處理倒塌元素引導方式的用戶，也就是在其導航欄變成未塌陷點。

所以，如果你想要的元素，只有當欄摺疊加入摺疊插件類，幷包括這個CSS。

默認網格浮動斷點值，如果您使用的是一些處理器使用CSS可變網格浮動斷點

設置好的屏幕-SM-分鐘即768px

@media (min-width: 768px){ 
    .collapsed-addon { 
    display: none; 
}

@media (min-width: $grid-float-breakpoint){ .collapsed-addon { display: none; } }

來源

2015-10-14 09:28:20 MQ87

如何在Bootstrap中僅顯示摺疊導航欄上的文本？

回答

相關問題