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>

Bootstrap网格系统

2 个答案: