Twitter Bootstrap導航在手機上的空白區域

我對基於Twitter Bootstrap的導航標題的行爲有些困惑。在基於桌面的版本中，似乎一切都很好，但是當從iPhone/iPad瀏覽時，我在右側看到了一個奇怪的白點（這似乎也定義了Tumblr控件的位置）。？調試這任何人有任何指針非常感謝你Twitter Bootstrap導航在手機上的空白區域

top right white spot

的實際代碼住在這裏http://thegodfounder.com/

編輯1：？

按照@baptme的建議，將視口更改爲「width = device-width，initial-scale = 1.0」實際將視口縮放到黑色結束位置並隱藏右側的所有內容。我沒有看到什麼？

changed viewport

編輯2：

1）添加浮子的建議：左&最小寬度：100％至身體的結果在實際填充空白空間，但似乎仍然是有些可疑：Tumblr控件仍然存在於頁面中間，並且在頁面加載時，它正好加載到Tumblr控件的右側，就好像有一些中斷點，但我不知道有什麼？ 2）我不明白使用Bootstrap導航欄的權利，當它不應該固定在頂部？

loads weirdly

來源

2012-07-21 Simon

你可以嘗試將導航欄代碼導出爲類似[jsfiddle]（http://jsfiddle.net）的東西，上面的樹和一些內容。如果這個bug也存在，它將更容易調試。如果沒有，你應該從你的頁面中刪除東西，直到錯誤不再發生，找到造成它的原因。 – Sherbrow 2012-07-21 09:13:23

當屏幕小於'.container'設置的寬度時，可以在瀏覽器中重現問題，但要查看必須向右滾動的空白區域。解決這個問題的一種方法是將'float：left'和'min-width：100％'添加到'body'。 – 2012-07-21 16:02:31

@MyHeadHurts你應該發佈一個答案，你的答案值得一個以上的評論+1。 – baptme 2012-07-21 16:37:49

更換

<meta name="viewport" content="width=device-width">

與

<meta name="viewport" content="width=device-width, initial-scale=1.0">

編輯：

我重新移動響應行爲和position:fixed從Twitter的引導.navbar我結束了同一個問題

no responsive and no position fixed

如果你不想做.navbar有position:fixed您可以使用媒體查詢，以避免.navbav寬度比視口寬。

編輯2：

的float: left和min-width: 100%到body從@MyHeadHurts評論無疑是解決這個問題的最好辦法。即使我不希望這兩個屬性一起做到這一點，它的作品。

編輯3：如果你希望自己的網頁根據視口比例

刪除<meta name="viewport" content="width=device-width, initial-scale=1.0">。

來源

2012-07-21 10:58:21 baptme

謝謝@baptme！我已將視口更改爲您的建議，請檢查我在該問題中的編輯。你看到發生了什麼？ – Simon 2012-07-21 15:51:30

那麼，沒有固定@baptme的位置，使用導航欄的正確方法是什麼？這是真的嗎？看起來像一個黑客的方式來實現我的這種行爲？謝謝，感謝您的見解！ – Simon 2012-07-22 20:47:07

@Simon你有沒有考慮過像bootstrap-responsive.css中使用的媒體查詢？這對小尺寸設備來說是一個很好的解決方案。 – baptme 2012-07-23 07:40:59

Twitter Bootstrap導航在手機上的空白區域

回答

相關問題