Question

我有一个测试页面，其中有一个容器（非流体），其中有2个div class =＆＃34; row clearfix＆＃34;其中有3个div class =＆＃34; col-sm-4列＆＃34;每个包含文本。当页面处于全宽时，我看到2行，每行包含3个文本块，随着屏幕变窄，文本变窄，直到最终所有文本块相互堆叠以创建6行文本块。

我想要发生的是，当屏幕变窄时，有一个点从2行（每行包含3个文本块）到3行（每行包含2个文本块），然后最终变为6行。< / p>

TBS 3中是否有允许这样做的类，或者它是＆＃34; col-sm-4列＆＃34;意味着它总是2x3然后是6x1？

我已经好好看了一下并尝试了一些事情，但我无法得到我之后的事情。

（headstrap.css在头部，src =＆＃34; js / jquery.min.js＆＃34; src =＆＃34; js / bootstrap.min.js＆＃34; src =＆＃34; js / scripts.js＆＃34;就在关闭正文标记之前。）

<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

根据视口更改响应式网站上的行堆叠 - Twitter Bootstrap 3

1 个答案: