引导网格系统

Question

我已经尝试解决这个问题已有一段时间了……我目前正在学习Web开发，并且实现bootstrap grid-system是一种练习。 我查看了许多资源，但仍然找不到答案。

问题是，一切似乎都工作正常。 在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 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>