Bootstrap在移動設備上的偏移太大

我試圖用Bootstrap 3.3.6構建一個頁面，它在筆記本電腦上工作正常，但是當我在Chrome和其他瀏覽器上模擬移動設備時，我得到的偏移太大，如下圖所示：Bootstrap在移動設備上的偏移太大

當前結果：

預期結果：

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-md-3"> 
      Some content... 
     </div> 
     <div class="col-md-3"> 
      Some content... 
     </div> 
     <div class="col-md-3"> 
      Some content... 
     </div> 
    </div> 
</div>

我自己也嘗試<div class="container">，但它仍然是相同的。和元：

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

來源

2015-12-04 Yax

你能分享一些代碼示例嗎？順便說一下，目前的結果在可讀性方面比預期的要好得多，而且幾乎所有的東西都從這個偏移量中除外。儘管分享了至少一行代碼，但如果沒有它，很難提供幫助。 – lmenus

@LubosMenus很抱歉。我以爲我做到了。我剛剛做到了。 – Yax

我想了解它有什麼問題，但基於您分享的代碼，一切都應該工作得很好。這是一個快速的CodePen - http://codepen.io/anon/pen/pgopNP。我現在唯一能想到的就是你沒有在移動視圖中使用適當的樣式 - 'col-md-3'只爲中畫面設置寬度，你需要指定小（sm）和小（xs）的寬度），那可能會導致它？ – lmenus

引導的一點是，它的響應，但你需要按照他們的慣例，使之如此。 col-md-x適用於「中等」屏幕。當您定位移動設備時，您需要使用col-xs-x。所以與class="col-xs-6 col-md-3"的div意味着在手機屏幕上，div將是6列，桌面屏幕上將是3列。

我建議你閱讀文檔，http://getbootstrap.com/css/

相關部分：

的引導3格系統具有類四個層次：XS（手機），SM（片劑），MD（桌面），和LG（大型桌面）。您幾乎可以使用這些類的任意組合來創建更加動態和靈活的佈局。

來源

2015-12-04 23:46:13

這不能解決我的問題。默認情況下，網格被堆疊在移動設備上，但正如你所建議的，我已經在中間'div'上指定了'col-xs-12'，並將其設置爲'hidden-xs'，但仍然有很大的偏移量。 – Yax

Bootstrap在移動設備上的偏移太大

回答

相關問題