html - 引导网格系统

Question

我一直在尝试解决这个问题一段时间......我目前正在学习网络开发，实施引导网格系统是其中的一项练习。我查看了很多资源，但我仍然没有找到答案。

问题是一切似乎都运行良好。在所有屏幕尺寸上，除了 S 和 XS 之间。由于某种原因，布局中断。当我在手机上看它时，它看起来是一样的。我截取了它当时的样子。

如果有人可以帮助我，那就太好了...谢谢

<div class="container-fluid">
    <h1>
        Work
    </h1>
    <div class="row" id="work1">
        <div class="col-xs-6 col-sm-3 col-md-3">
            <img class="img-responsive" src="img/image4.png">
        </div>
        <div class="col-xs-6 col-sm-3 col-md-3">
            <p>
                Test your site out on your phone. It should look like this
                (well, without the cats! Please replace these images with
                screenshots and descriptions of your own work). Test your site
                out on your phone. It should look like this (well, without the
                cats!
            </p>
        </div>
        <div class="col-xs-6 col-sm-3 col-md-3">
            <img class="img-responsive" src="img/image4.png">
        </div>
        <div class="col-xs-6 col-sm-3 col-md-3">
            <p>
                Test your site out on your phone. It should look like this
                (well, without the cats! Please replace these images with
                screenshots and descriptions of your own work). Test your site
                out on your phone. It should look like this (well, without the
                cats!
            </p>
        </div>
    </div>
    <div class="row" id="work2">
        <div class="col-xs-6 col-sm-3 col-md-3">
            <img class="img-responsive" src="img/image4.png">
        </div>
        <div class="col-xs-6 col-sm-3 col-md-3">
            <p>
                Test your site out on your phone. It should look like this
                (well, without the cats! Please replace these images with
                screenshots and descriptions of your own work). Test your site
                out on your phone. It should look like this (well, without the
                cats!
            </p>
        </div>
        <div class="col-xs-6 col-sm-3 col-md-3">
            <img class="img-responsive" src="img/image4.png">
        </div>
        <div class="col-xs-6 col-sm-3 col-md-3">
            <p>
                Test your site out on your phone. It should look like this
                (well, without the cats! Please replace these images with
                screenshots and descriptions of your own work). Test your site
                out on your phone. It should look like this (well, without the
                cats!
            </p>
        </div>
    </div>
</div>

Answer 1

由于您将在 XS 设备上拥有超过 12 个列，我认为您clearfix只需要为这个特定的视口添加一个：

<div class="col-xs-6 col-sm-3 col-md-3"><img src="img/image4.png" class="img-responsive"></div>
<div class="col-xs-6 col-sm-3 col-md-3"><p> Test your site out on your phone. It should look like this (well, without the cats! Please replace these images with screenshots and descriptions of your own work). Test your site out on your phone. It should look like this (well, without the cats! </p></div>

<div class="clearfix visible-xs-block"></div>

<div class="col-xs-6 col-sm-3  col-md-3"><img src="img/image4.png" class="img-responsive"></div>
<div class="col-xs-6 col-sm-3 col-md-3"><p> Test your site out on your phone. It should look like this (well, without the cats! Please replace these images with screenshots and descriptions of your own work). Test your site out on your phone. It should look like this (well, without the cats! </p></div>

Answer 2

+-----------+-----------+
|sm-6       |sm-6       |
|+----+----+|+----+----+|
||xs-6|xs-6|||xs-6|xs-6||
|+----+----+|+----+----+|
+-----------+-----------+

这就是你做你想做的事，每行不能超过 12col

当您需要这样做时，xs6 + xs6 | xs6 + xs6您必须使用嵌套行，并且父行将在需要时拆分。

http://www.bootply.com/pZ84zsBrqA

<div class="row" id="work1">
    <div class="col-sm-6">
        <div class="row">
            <div class="col-xs-6">
                <img class="img-responsive" src="img/image4.png">
            </div>

            <div class="col-xs-6">
                <p>
                    Test your site out on your phone. It should look like this
                    (well, without the cats! Please replace these images with
                    screenshots and descriptions of your own work). Test your
                    site out on your phone. It should look like this (well,
                    without the cats!
                </p>
            </div>
        </div>
    </div>

    <div class="col-sm-6">
        <div class="row">
            <div class="col-xs-6">
                <img class="img-responsive" src="img/image4.png">
            </div>

            <div class="col-xs-6">
                <p>
                    Test your site out on your phone. It should look like this
                    (well, without the cats! Please replace these images with
                    screenshots and descriptions of your own work). Test your
                    site out on your phone. It should look like this (well,
                    without the cats!
                </p>
            </div>
        </div>
    </div>
</div>