Bootstrap導航欄覆蓋縮放內容

我正在建立一個導航欄的navbar-fixed-top類的網站。除了當我放大時，它在任何情況下都可以正常工作。當我放大移動設備時，導航欄開始打包並在摺疊後進入下一行。Bootstrap導航欄覆蓋縮放內容

但是，我不希望導航欄在放大時受到影響，但同時保持對不同設備的響應能力。

這是可能的還是有解決方法？

<nav class="navbar navbar-default navbar-static-top lato-reg" id="navMenu"> 
    <div class="container"> 
     <div class="navbar-header page-scroll"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
    </button> 
    <a class="navbar-brand" href="index.html"><img src=""></a> 
    </div> 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
    <ul class="nav navbar-nav navbar-right"> 
     <li class="hidden"> 
     <a href="#page-top"></a> 
     </li> 
     <li class="page-scroll"> 
     <a href="index.html">Work</a> 
     </li> 
     <li class="page-scroll"> 
     <a href="index.html">Writings</a> 
     </li> 
     <li class="page-scroll"> 
     <a href="index.html">About</a> 
     </li> 

    </ul> 
    </div> 
</div> 
<!-- /.container-fluid -->

來源

2014-12-05 user782400

可能的重複[禁用縮放在div上，但允許在頁面上放大縮小（另一個div）]（http://stackoverflow.com/questions/13886763/disable-zoom-on-a-div-but- allow-zoom-on-the-page-an-alternate-div） – Sebsemillia 2014-12-05 16:36:30

這是正路觸摸設備上處理的位置是：固定的：它總是保持不變，涵蓋了內容的其餘部分。

一個簡單的解決方法是使用視meta標籤和禁用用戶比例：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />

與引導建立了一些最暢銷的管理主題，做到這一點。它使你的頁面像一個應用程序。然而，它觸發了用戶觸摸時的正常行爲，大多數開發人員不想搞砸可訪問性，包括Bootstrap自己的網站「GetBootstrap.com」。

另一種是不使用固定位置，而是使用導航欄上的靜態位置。 GetBootstrap.com不使用固定位置的導航欄，它不會沿着頁面跟隨你。在他們的文檔頁面上，詞綴正在側欄上工作。當您放大觸摸設備時，頁面會混淆佈局。這是觸摸設備上的正常行爲。大多數時候，我已經廣泛地研究過這個問題，開發者已經決定允許在伸縮手勢方面的無障礙特權佈局，即：儘管看起來很糟糕並且遮蓋了內容，但他們仍然保持獨立。這就是我現在所做的。

@Sebsemilla評論中的其他解決方案值得探討，但涉及媒體查詢的解決方案相當無用。媒體查詢檢測寬度，高度，方向和像素密度，但它們不檢測某個人是否正在使用觸摸設備。

一般情況下，根據具體情況，我使用javascript檢測觸摸或非觸摸並提供位置：固定用於非觸摸設備和位置：絕對或位置：靜態或位置：觸摸設備上的相對位置。有些人，很少有人對此有所說，但直到固定位置按預期工作時，我認爲位置：固定爲非觸摸設備的漸進增強

另一個想法是用jQuery固定假位置：

What is the simplest jQuery way to have a 'position:fixed' (always at top) div?

與http://benalman.com/projects/jquery-throttle-debounce-plugin/

在這裏使用它的一個演示中，我設置：https://jsbin.com/nugibi/2/edit?html,css,js,output

你可以用DET結合本觸摸並僅在觸摸設備上使用它。

來源

2014-12-06 16:14:44 Christina

不錯的徹底回覆......我相信開發者不打算讓固定職位像預期的那樣工作。 – 2014-12-09 00:31:06

Bootstrap導航欄覆蓋縮放內容

回答

相關問題