導航欄折疊->引導程序
[英]navbar collapse --> Bootstrap
問題描述
我正在建立一個網站： http : //www.sbr-accounting.com/
現在我的菜單響應了。 因此，當減小屏幕寬度時，菜單將消失，並且僅顯示菜單按鈕。 大！
但是，當我在Iphone（5S）上打開網站時，菜單完全顯示出來了，我希望菜單默認顯示為折疊狀態。
有人可以幫我從這里出去嗎？
<!-- Create full width navbar -->
<div class='navbar navbar-default navbar-static-top'>
<!-- Inside full width navbar create a container -->
<div class='container'>
<div class='navbar-header'>
<!-- Website title including home link -->
<a href='index.html' class='navbar-brand'>SBR-accounting</a>
<!-- Create nav icon for small displays. The text should only be visible for screen readers -->
<button type='button' class='navbar-toggle' data-toggle='collapse' data-target='.navbar-collapse'> <span class='sr-only'>Toggle navigation</span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
</button>
</div>
<ul class='nav navbar-nav navbar-right collapse navbar-collapse'>
<li><a href='/'>home</a></li>
<li><a href='/'>Informatie</a></li>
<li><a href='/'>Contact</a></li>
</ul>
</div> <!-- Close container inside navbar -->
</div> <!-- Close full width navbar -->
1 個解決方案
解決方案1
4 已采納 2015-09-07 18:01:44
我通過台式機和移動設備查看了您的代碼。 在<head>標記中，您缺少視口<meta>標記。
從Bootstrap 文檔
使用Bootstrap 2，我們為框架的關鍵方面添加了可選的移動友好樣式。 使用Bootstrap 3，我們從一開始就將項目重寫為移動友好型。 它們沒有添加可選的移動樣式，而是直接嵌入到核心中。 實際上，Bootstrap首先是移動設備。 可以在整個庫中找到移動優先樣式，而不是在單獨的文件中找到。
為確保正確渲染和觸摸縮放，請將視口meta標簽添加到
<head>。
<meta name="viewport" content="width=device-width, initial-scale=1">
在這里，您可以找到有關視口基礎知識的一些解釋。 從那里我推斷出這種解釋：
width屬性控制視口的大小。 可以將其設置為特定的像素數，例如width = 600或特殊值device-width值，該值是CSS像素的屏幕寬度，縮放比例為100％。 （有相應的height和device-height值，這對於包含根據視口高度更改大小或位置的元素的頁面可能有用。）
初始縮放屬性控制頁面首次加載時的縮放級別。 最大比例，最小比例和用戶可縮放屬性控制如何允許用戶放大或縮小頁面。
滾動時Bootstrap導航欄折疊
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.