Question

我在下面写了HTML我正在使用bootstrap 3.3.7，我已经在网上匆匆忙忙地调整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">

这表示在最小分辨率下，每个div都会跨越所有12列，但在小屏幕（sm）及以上，每个div占用两列。

Answer 2

可能是由多个问题引起的：

你在行上放了一个margin: 0; - 默认情况下，该行的水平边距为负，通过覆盖它，元素不再适合
您可能正在使用.thumbnail类修改列的wdith / margin，从而打破堆叠
将col-xs-2更改为col-xs-12以使其堆叠在另一个之下（并添加另一个类，例如col-sm-2以使平板电脑上的原始布局和更高的分辨率） - 更多信息关于here

Bootstrap网格不堆叠

2 个答案: