Bootstrap grid not stacking

Question

我已經寫了HTML下面我正在使用bootstrap 3.3.7，我一直在通過web和調整CSS和jQuery塞滿了3天現在，我沒有找到解決方案。

我無法讓網格在移動視圖中堆疊。當我對佈局進行編碼，然後發生了一些未知的事情，我無法修復它。請幫忙。

<div id="idport"> <!--Portfolio--> 
     <h2 class="mheading">Portfolio</h2> 

     <div class="row" style="margin:0"> 
      <div class="col-xs-2 thumbnail"> 
       <a href="#" Title="Some website"> 
        <img src="Spacer.png" alt="Some website"> 
       </a> 
       <p>This is a title</p> 
      </div>    
      <div class="col-xs-2 thumbnail"> 
       <a href="#" Title="Some website"> 
        <img src="Spacer.png" alt="Some website"> 
       </a> 
       <p>This is a title</p>      
      </div> 
      <div class="col-xs-2 thumbnail"> 
       <a href="#" Title="Some website"> 
        <img src="Spacer.png" alt="Some website"> 
       </a> 
       <p>This is a title</p>      
      </div> 
      <div class="col-xs-2 thumbnail"> 
       <a href="#" Title="Some website"> 
        <img src="Spacer.png" alt="Some website"> 
       </a> 
       <p>This is a title</p>      
      </div> 
      <div class="col-xs-2 thumbnail"> 
       <a href="#" Title="Some website"> 
        <img src="Spacer.png" alt="Some website"> 
       </a> 
       <p>This is a title</p>      
      </div> 
     </div> 
    </div> <!--end Portfolio--> 

Answer 1

如果你想讓它們堆疊爲小分辨率，那麼你需要告訴Bootstrap。你現在所說的每個div應該以最小（xs）分辨率和更高的分辨率佔據兩列。因此，而不是使用：

<div class="col-xs-12 col-sm-2 thumbnail"> 

這是說在最小分辨率使每個格跨越所有12列，但在小屏幕（SM）及以上，佔據每格兩列。

Answer 2

它可以被多個問題引起：

• 你把margin: 0;該行 - 默認情況下，該行具有負水平邊距，通過重寫此，要素不符合任何更多
• 你可以修改的列的wdith /餘量與.thumbnail類和從而打破堆疊
• 變化col-xs-2成col-xs-12使其疊加一個在另一個之下（並添加另一個類，例如col-sm-2具有原始佈局平板電腦和更高分辨率） - 關於這個的更多信息here