XS-6列在一个引导带3网站上停留在移动堆叠

Question

我正在开发这个Bootstrap 3站点：

http://ghitulescu.de/beta/TRR/TuerenReuss/TuerenReuss/index.html

我希望有21个小的-xs-6列水平排列(每行两列)(只要视口是“K hnlein Türen”的小预览)。

• 大于@screen-xs=480 xs和
• 小于@screen-xs=767 max

并且只有当视口小于@screen xs=480 xs时，才让它们垂直堆叠。

然而，即使当视口> 480 px时，它们仍然是堆叠的，所以我在移动设备上有一个很长的站点可以滚动:-(

HTML代码如下所示：

<main role="main">            
    <div class="page-contents container">
        <div class="row">

            <div class="col-sm-2 col-xs-6"><!-- Galerie Weißlack -->
                <a href="https://www.koehnlein-tueren.de/showroom-innentueren0.0.html" target="_blank" title="Galerie Weißlack">
                    <img class="img-responsive center-block schreinerinnung-logo" alt="Galerie Weißlack" src="img/kataloge/koehnlein/IT_Galerie_Weisslack.jpg">
                </a>
            </div><!-- /Galerie Weißlack -->

            (the above <div> 21 times!!!)

        </div>
    </div>
</main>

而“schreinerinnung徽标”类只处理最上面的边距：

.schreinerinnung-logo {
    @media (min-width: @screen-xs-min) and (max-width: @screen-sm-max) {
        margin-top: 30px;
    }
    @media (min-width: @screen-md-min) {
        margin-top: 50px;
    }
}

为了查找错误，我甚至用一个简单的段落(也是21次)替换了a-标记，如下所示：

<main role="main">            
    <div class="page-contents container">
        <div class="row">

            <div class="col-sm-2 col-xs-6">
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
            </div>

            (the above <div> 21 times)

        </div>
    </div>
</main> 

…没有效果:在小于@screen=767 max的视图中，列彼此堆叠在一起，而不是水平排列。:-(

​

​

一个有趣的事实是:从col-xs-6到col-xs-2或col-xs-4改变了段落中文本的宽度，所以看起来xs -信息渗透了，但是还有最后一条规则，在xs中，所有的东西都应该垂直堆叠，即使有足够的水平空间来并排几个元素。

我做错什么了？

谢谢!

致以敬意，

弗拉德

Answer 1

您需要在这里重写一个clear:both：

@media (max-width: 767px)
.page-contents [class^=col] {
    clear: both;
    padding-bottom: 40px;
}