Bootstrap 3 站点上的 XS-6 列在移动设备上保持堆叠

Question

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

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

我想让 21 个小 col-xs-6 列水平排列（每行两个）（“Köhnlein Türen”右侧的小预览），只要视口是

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

仅当视口小于@screen-xs-min = 480px 时才将它们垂直堆叠。

但是，即使视口大于 480 像素，它们也会保持堆叠，所以我在移动设备上有一个很长的网站可以滚动：-(

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-logo”只处理上边距：

.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;
    }
}

---

试图找出错误我什至用一个简单的段落替换了a-tag（也是21次），像这样：

<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-xs-max = 767px 的视口中，列相互堆叠并且不水平排列。 :-(

一个有趣的事实：从 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;
}