Twitter Bootstrap：響應式導航欄右側有空隙

我正在嘗試實現響應式導航欄。它似乎工作，但當屏幕變小時，右側會出現間隙。見截圖：Twitter Bootstrap：響應式導航欄右側有空隙

enter image description here

我沒有寫任何CSS。所有這些仍然是純粹的Bootstrap。

更新1：的jsfiddle

http://jsfiddle.net/BaR3q/ - 它做它的jsfiddle了。所以要麼我做錯了（可能）或Twitter搞砸了（不太可能）。 what to do?

來源

2012-10-22 StackOverflowNewbie

你需要包括您的標記。你在使用流體類嗎？ –

屏幕截圖不夠？ Navbars顯然不使用'.row'或'.row-fluid'，所以我不確定你的意思。我試圖從文檔中複製這個。 – StackOverflowNewbie

嘗試在導航欄內使用'container-fluid'而不是'container' –

標記中沒有指定元素應該展開以填充視口的內容。添加body { width: 100%}將照顧它，或者可選地覆蓋navbar的寬度爲auto。

Twitter Bootstrap旨在成爲腳手架和組件，而不是開箱即用的解決方案，因此這可能是需要指定的其中一項。導航欄的static版本很可能會寫入，因此它可以輕鬆用於除body以外的其他容器，並且這種情況發生在需要微調的20％的情況下。

來源

2012-10-22 11:12:09

我加了'body {width：100％}'，現在可以工作。但是，當我減小屏幕寬度時，問題是如何出現的？另外，我根據您的評論嘗試了'.container-fluid'，但是我沒有看到導航項的行爲有任何不同;我應該看到什麼？ – StackOverflowNewbie

關於navbars的主題，不應該在需要時垂直堆疊垂直響應嗎？與本網站http://bootswatch.com/slate/中的第二個導航欄類似。我比Bootstraps JS解決方案更喜歡這種風格。 – StackOverflowNewbie

我沒有檢查調整大小的問題。畢竟，它可能實際上是自舉中的一個小故障。一旦媒體查詢在屏幕上顯示大小，「body」就會被填充，而對導航欄的調整不足以對付它。就垂直堆垛而言，您可以輕鬆地做到這一點。導航欄本身可能不應該這樣做，因爲它使得除了導航鏈接之外還可以保留元素。 –

想到幾個潛在的原因，但正如其他人指出，很難說沒有看到代碼。不過，我會補充一點，我明白，分享足夠的代碼來完成這樣的事情是多麼艱難，而不會給予太多的幫助。因此，這裏有一些問題（和這個特定的問題，你不應該使用.container-fluid如先前建議，可能無論如何都不會工作，如果確實如此它只是掩蓋可能加劇的問題。）：

你是否改變了任何響應式樣式？如果是這樣，你是否改變了.container的寬度，填充或邊距？
您是否在響應式樣中將某個寬度或邊距應用於.navbar本身？這對我來說似乎是一個可能的原因。
<body>怎麼樣，你是否設置了填充？

來源

2012-10-22 02:11:30 jonschlinkert

我沒有寫任何CSS。這是100％Bootstrap。 – StackOverflowNewbie

你可以試試這個嗎？當您在瀏覽器中預覽頁面時，右鍵單擊並將頁面保存到某個新文件夾。然後用該文件夾中的html和css創建一個jsfiddle。你不需要包含整個html頁面，只是足以重現問題。或者，如果你會更舒服，隨時在github（相同的用戶名）上看我，並通過電子郵件與我聯繫。我很樂意嘗試爲你解決這個問題。 – jonschlinkert

謝謝。我發佈了一個jsFiddle鏈接。 – StackOverflowNewbie

我通過添加下面的meta標籤（任意）一個解決了這個問題：

<meta name="viewport" content="initial-scale=1"> 

<meta name="viewport" content="user-scalable = no">

來源

2014-02-06 00:43:54 gaplus

Twitter Bootstrap：響應式導航欄右側有空隙

回答

相關問題