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