javascript - 根据视口(viewport)更改响应式站点上的行堆叠 - Twitter Bootstrap 3

Question

我有一个测试页，它有一个容器(非流体)，其中有 2 个 div class="row clearfix"，其中有 3 个 div class="col-sm-4 column"，每个都包含文本。 当页面全宽时，我看到 2 行，每行包含 3 个文本 block ，随着屏幕变窄，文本变窄，直到最终所有文本 block 相互堆叠，形成 6 行文本 block 。

我想要发生的是，当屏幕变窄时，有一个点从每行包含 3 个文本 block 的 2 行变为每行包含 2 个文本 block 的 3 行，然后最终像以前一样变为 6 行。

TBS 3 中是否有允许这样做的类，或者它是“col-sm-4 列”这一事实是否意味着它总是 2x3 然后 6x1？

我环顾四周并尝试了一些东西，但我无法得到我想要的东西。

(头部的 bootstrap.css 和 src="js/jquery.min.js"src="js/bootstrap.min.js"src="js/scripts.js"就在结束的 body 标签之前。 )

<div class="container">
    <div class="row clearfix">
        <div class="col-md-4 column">
            <p>
                Ad simul sensibus per, vel brute summo an, eam harum viderer definiebas ne. Falli
                graeco sea cu. Est dolores lobortis omittantur ei, exerci scriptorem no vim. Diam
                tamquam adolescens est id, partem eleifend in pro.</p>
        </div>
        <div class="col-md-4 column">
            <p>
                Ad simul sensibus per, vel brute summo an, eam harum viderer definiebas ne. Falli
                graeco sea cu. Est dolores lobortis omittantur ei, exerci scriptorem no vim. Diam
                tamquam adolescens est id, partem eleifend in pro.</p>
        </div>
        <div class="col-md-4 column">
            <p>
                Ad simul sensibus per, vel brute summo an, eam harum viderer definiebas ne. Falli
                graeco sea cu. Est dolores lobortis omittantur ei, exerci scriptorem no vim. Diam
                tamquam adolescens est id, partem eleifend in pro.</p>
        </div>
    </div>
    <div class="row clearfix">
        <div class="col-md-4 column">
            <p>
                Ad simul sensibus per, vel brute summo an, eam harum viderer definiebas ne. Falli
                graeco sea cu. Est dolores lobortis omittantur ei, exerci scriptorem no vim. Diam
                tamquam adolescens est id, partem eleifend in pro.</p>
        </div>
        <div class="col-md-4 column">
            <p>
                Ad simul sensibus per, vel brute summo an, eam harum viderer definiebas ne. Falli
                graeco sea cu. Est dolores lobortis omittantur ei, exerci scriptorem no vim. Diam
                tamquam adolescens est id, partem eleifend in pro.</p>
        </div>
        <div class="col-md-4 column">
            <p>
                Ad simul sensibus per, vel brute summo an, eam harum viderer definiebas ne. Falli
                graeco sea cu. Est dolores lobortis omittantur ei, exerci scriptorem no vim. Diam
                tamquam adolescens est id, partem eleifend in pro.</p>
        </div>
    </div>
</div>

Answer 1

明白了。只需像这样包含您的代码:

<div class="container">
    <div class="row clearfix">
        <div class="col-md-4 col-sm-6 column">
            <p>Ad simul sensibus per, vel brute summo an, eam harum viderer definiebas ne. Falli graeco sea cu. Est dolores lobortis omittantur ei, exerci scriptorem no vim. Diam tamquam adolescens est id, partem eleifend in pro.</p>
        </div>
        <div class="col-md-4 col-sm-6 column">
            <p>Ad simul sensibus per, vel brute summo an, eam harum viderer definiebas ne. Falli graeco sea cu. Est dolores lobortis omittantur ei, exerci scriptorem no vim. Diam tamquam adolescens est id, partem eleifend in pro.</p>
        </div>
        <div class="col-md-4 col-sm-6 column">
            <p>Ad simul sensibus per, vel brute summo an, eam harum viderer definiebas ne. Falli graeco sea cu. Est dolores lobortis omittantur ei, exerci scriptorem no vim. Diam tamquam adolescens est id, partem eleifend in pro.</p>
        </div>
        <div class="col-md-4 col-sm-6 column">
            <p>Ad simul sensibus per, vel brute summo an, eam harum viderer definiebas ne. Falli graeco sea cu. Est dolores lobortis omittantur ei, exerci scriptorem no vim. Diam tamquam adolescens est id, partem eleifend in pro.</p>
        </div>
        <div class="col-md-4 col-sm-6 column">
            <p>Ad simul sensibus per, vel brute summo an, eam harum viderer definiebas ne. Falli graeco sea cu. Est dolores lobortis omittantur ei, exerci scriptorem no vim. Diam tamquam adolescens est id, partem eleifend in pro.</p>
        </div>
        <div class="col-md-4 col-sm-6 column">
            <p>Ad simul sensibus per, vel brute summo an, eam harum viderer definiebas ne. Falli graeco sea cu. Est dolores lobortis omittantur ei, exerci scriptorem no vim. Diam tamquam adolescens est id, partem eleifend in pro.</p>
        </div>
    </div>
</div>

它会如您所愿地工作。 See fiddle