僅在自舉導航欄摺疊時顯示鏈接文本

如何在鏈接的圖標/徽章旁顯示鏈接文本只有當摺疊navbar？僅在自舉導航欄摺疊時顯示鏈接文本

現在我bootstrap3驅動navbar只使用圖標，當它沒有摺疊：

enter image description here

當navbar被摺疊這是有問題的：

enter image description here

...鏈接旁邊沒有描述性文字，但顯然有空間。刪除文字描述是爲了節省空間，但是一旦崩潰就有足夠的空間......而且它沒有描述就會有缺陷，因爲很多房地產都被佔用了。

我已經通過輔助類一看，在文檔中collapse功能，並試圖把<span class='collapse in'>標籤將包括文本，該badge或標籤之後。

當我這樣做時，文本總是可見的，不僅僅當navbar被摺疊時。根據瀏覽器的實際寬度，我不想使用或其他類似的類。

什麼是檢測元素的正確方法是摺疊的navbar，只顯示文本在這種情況下？

這裏有一個要點：https://gist.github.com/digitalextremist/6e70807a8b0e3c3da993

而且bootply：http://www.bootply.com/105538

來源

2014-01-13 digitalextremist

你可以創建一個[Bootply]（http://bootply.com）或者你的代碼嗎？ – ZimSystem

並添加了一個要點。也用於bootply。我看你是這個的創造者。從未使用它。看起來非常有用。 – digitalextremist

有什麼理由不使用jQuery？只是好奇。 http://stackoverflow.com/a/18568776/2930161 – tkymtk

什麼

.navbar-collapse .text-you-want-hidden-on-desktop { 
    display: none; 
} 

.navbar-collapse.in .text-you-want-hidden-on-desktop { 
    display: inline; 
}

我相信上面關於jQuery的是暗示你可以看爲show.bs.collapse事件的評論，並採取相應行動。有關該事件的更多信息： http://getbootstrap.com/javascript/#collapse

但我相信你可以用CSS來實現你想要的。

來源

2014-01-31 21:18:23 emptywalls

到目前爲止，這工作，但打開可摺疊版本的導航欄時會稍微延遲。你對這件作品有補救嗎？ – digitalextremist

我使用這種方法看到的另一個問題是，如果窗口調整爲小，菜單打開，然後調整大小再次超過閾值，那麼'.in'類將保持不變。使這種方法非理想 – mix3d

延遲當菜單正在移動/動畫時，由css類'.collapsing'替換'.collapse'和'.collapse.in'。您可以通過添加'.navbar-collapse.collapsing .text-you-want-hidden-on-desktop {display：inline;}'來修復延遲，以確保它在菜單移動時顯示，但你仍然遇到上面解釋的狀態問題，在屏幕未摺疊/大於移動中斷的情況下，最終可能會顯示它們。 – mix3d

我試圖做類似於類似於.in類的jQuery的Bootstrap的Collapse插件，但是它不是非常可靠，因爲在導航欄會崩潰然後不收縮之後，類會留下來。

我推薦使用CSS媒體查詢。在Bootstrap 3的navbar.less文件中，786px用作摺疊導航欄的斷點，所以我建議在CSS中使用它。

/* standard navbar */ 
@media (min-width: 768px) { 
    ... 
} 

/* mobile navbar */ 
@media (max-width: 767px) { 
    ... 
}

來源

2014-06-07 00:26:31

感謝您的支持。這解決了我在其他答案中詢問的延遲問題。最佳答案。 – digitalextremist

也許有點晚，但對於偶然遇到這個問題的人有用：最好使用引導變量'@ grid-float-breakpoint'和'@ grid-float-breakpoint-max'來代替具體的像素值，所以如果你想改變你的斷點，你的代碼不會中斷。 – dorthrithil

你是對的，但你只能在你自己構建Bootstrap時使用它們（如果你使用Less或Sass，那麼建議使用它）。 –

也許我不明白這個問題的正確性，但不是像使用隱藏類一樣簡單嗎？

<li class="hidden-xs"><a href="#">Action</a></li>

來源

2015-04-23 19:02:04 pungggi

這是一個完美的選擇！但是，我認爲他在尋找'.visible-xs-inline'，爲現有下拉菜單添加一行文本，而不是添加新的文本。新答案即將到來。 – mix3d

去關@ pungggi的回答是：

由於引導已經定義的媒體查詢斷裂，有助手響應類來說明基於相同的符/隱藏的東西，網格使用：hidden-(size)和visible-(size) 。這樣，如果您製作了基於less/sass的模板，則不必在多個位置更改@ media-query參數。（參見http://getbootstrap.com/css/#responsive-utilities-classes更多信息）

所以添加與.visible-xs-inline類span或p標籤將確保指定的文本中僅示出當屏幕被確定「XS」，它被用來作爲斷裂點爲摺疊導航菜單，並且-inline部件將確保它以內聯方式顯示，因爲默認情況下，.visible-xs將使用display:block。

代碼片段：

<ul class="nav navbar-nav navbar-right"> 
     <li class="dropdown"> 
      <a href="#" data-toggle="dropdown"> 
       <span class="fa fa-plus"></span> 
       <!-- The following span will only show 
        when the nav menu is collapsed --> 
       <span class="visible-xs-inline">ADD SOMETHING BUTTON</span> 
      </a> 
      <!-- all the dropdown stuff --> 
     </li> 

     <li class="dropdown"> 
      <a href="#" data-toggle="dropdown"> 
       <span class="fa fa-compass" title="Energy Compass"></span> 
       <span class="visible-xs-inline">ENERGY COMPASS</span> 
      </a> 
      <!-- all the dropdown stuff --> 
     </li> 
     <!-- continued list --> 
    </ul>

注：我建議使用CSS填充/保證金，或 的，以確保跨度文本是正確填充，但不會青少年。

來源

2015-08-04 16:01:11 mix3d

我只是把它添加到我自己的應用程序，它比添加額外的CSS與媒體查詢只是爲了隱藏導航中的一些文本更容易/更清潔 – mix3d

此外，顯然是非顯示指定的類，（'.visible -sm' vs'.visible-sm-block'）折舊，並且將在Bootstrap v4中被刪除。你懂得越多！ – mix3d

僅在自舉導航欄摺疊時顯示鏈接文本

回答

相關問題