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

Question

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

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

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

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

并且仅当视口(viewport)变得小于@screen-xs-min = 480px 时才将它们垂直堆叠。

然而，即使视口(viewport)大于 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 的视口(viewport)中，列相互堆叠并且不水平排列。 :-(

一个有趣的事实:从 col-xs-6 更改为 col-xs-2 或 col-xs-4 会改变段落中文本的宽度，所以看起来 xs-information 渗透但有某种形式最后一条规则说在 xs 中所有东西都应该垂直堆叠，即使有足够的水平空间来并排排列几个元素。

我做错了什么？

谢谢!

问候，
弗拉德

Answer 1

你需要在这里覆盖一个clear:both:

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