Bootstrap 3- Div被堆疊在手機上或瀏覽器調整大小 - 沒有水平滾動條

Question

我是新的twitter引導。最近我開始使用twitter bootstrap 3進行一個項目（一個Q & A站點）的設計。我遇到了設計中的一個主要問題。

在我的網站的第一個基本的結構，我始終遵循幾乎所有的網頁，我的網站：

<div class="container-fluid" > 
    <nav class="navbar navbar-inverse" role="navigation">....</nav> 
    <div class="jumbotron" > .... </div> 
    <div class="row"> 
     <div class="col-md-1 text-center"> ... </div> 
     <div class="col-md-1 text-center"> ... </div> 
     <div class="col-md-7 text-center"> ... </div> 
     <div class="col-md-1 text-center"> ... </div> 
    </div> 
</div> 

我的問題：

我的網站工作絕對沒問題，我的瀏覽器被最大化。所有的問題，開始時我調整我的瀏覽器或當我打開我的網站我的Android 手機

• 我所有Div S的在Div.row寫有，這都應該是水平神韻：一個除另一個（我認爲使用float:left）正在堆疊。它打破了我的網站的整個結構。當瀏覽器調整大小或當我在移動電話中打開我的網站時，它們都被疊加在一起（垂直）
• 即使我的導航欄的結構也被破壞了。所有的導航欄elemnts也越來越堆疊而不是浮動水平

我想：

我注意到，在調整或手機，根據屏幕大小，這是引導rsizing文字大小非常好，我非常高興與thatbut我想是

• 在瀏覽器中調整大小或當我在手機打開我的網站，它不會破壞我的網站的結構，所有div旨意時，瀏覽器最大化並實現這一點，將在瀏覽器中添加水平滾動條調整或當我在手機打開我的網站

在這裏，我要水平對齊一個除了彼此，因爲它是做了一些MS-畫圖解釋我的問題

圖1：我有我的筆記本電腦是什麼瀏覽器時被最大化：

圖2：什麼我在瀏覽器中調整大小獲取或當我在手機打開我的網站

圖3 ：我想在瀏覽器中調整大小或什麼，當我在打開我的網站手機

---

---

我嘗試：

由於我是新來bootstrap我沒有嘗試改變/ cutomize在css文件太多。我試過的是我在.container-fluid，.row,.nav上應用了overflow-x:auto;，但它沒有幫助我。沒有問題解決

Answer 1

您正在使用col-md-＃，其目的是爲768px以上但970px以下的間距。如果你想保持佈局不管，你可以使用或應用額外的移動樣式（這是引導3的功能）。

我已經把你的老班的完好以及一個例子：

<div class="row"> 
     <div class="col-xs-1 col-md-1 text-center"> ... </div> 
     <div class="col-xs-1 col-md-1 text-center"> ... </div> 
     <div class="col-xs-7 col-md-7 text-center"> ... </div> 
     <div class="col-xs-1 col-md-1 text-center"> ... </div> 
    </div> 

閱讀此瞭解更多詳情：GetBootstrap