Question

我试图建立一个基于bootstrap的网站。我在每个col中构建了一个网格系统，其中包含两个row，它们具有类"col-md-8"和"col-md-4"。我想知道的是，如果有人在平板电脑上查看网站，例如两个col应该在彼此之下。

col-md-8里面有一个Image，如果我让浏览器窗口变小，看看它在平板电脑上会是什么样子，那么文字的高度越长，图片越小。所以他们仍然彼此相邻，但我想把它们放在彼此之下。

示例代码

<div class="item"> <!--Slide Block 2 -->
    <div class="row featurette">
        <div class="col-md-8">
            <img class="featurette-image img-responsive" data-src="holder.js/500x500/auto" alt="T & M Limousinen Exklusive Transferfahrten" img src="img/placeholder_2.png">
        </div>
        <div class="col-md-4">
            <h3 class="featurette-heading">Exklusiv und komfortabel <span class="text-muted"> bis zum Ziel</span></h3>
            <p class="lead">
                Ob regional oder bundesweit, T&M ist für Ihre Transferfahrten der richtige Partner. Exklusivität, Komfort und Diskretion stehen an oberster Stelle.

                Unsere Gäste werden direkt nach Verlassen des Flugzeuges, vom Hotel oder bei ihren Geschäftsterminen abgeholt. Wir bieten unseren Gästen somit höchste Flexibilität und den größtmöglichen Komfort für Geschäftsreisen oder Privatbesuche.
            </p>
            <p class="lead">
                Nutzen Sie die Möglichkeit, komfortabel, sicher und entspannt zu Ihren Terminen zu gelangen.

                Wir fahren Sie innerhalb der Hansestadt Hamburg oder bundesweit stets pünktlich zu Ihren Zielen. In unseren Limousinen werden Transfers zu Geschäftsterminen, Messen, Hotels, Flughafen zum exklusiven Erlebnis.

                Gerne unterbreiten wir Ihnen Ihr persönliches Angebot.
            </p>
            <p class="lead">
                Anfragen richten Sie bitte per Mail an <a href="mailto:info@limousinenservice.de">info@limousinenservice.de</a> oder per Telefon an 040/500182-0.
            </p>
        </div>
    </div>
</div>

以下是我上传预览link

的链接

Answer 1

尝试使用col-sm-它基本上适用于宽度为768像素及以上的小型设备平板电脑

<div class="col-md-8 col-sm-12"></div>
<div class="col-md-4 col-sm-12"></div>

Answer 2

试试这个

 <div class="col-md-8 col-sm-6"></div>
    <div class="col-md-4 col-sm-6"></div>

div盒子互相响应

2 个答案: