如何在移动设备上解决 Bootstrap Grid 问题？

Question

我正在编辑 Ebay 列表上的描述，其中不允许编写脚本。 ebay 描述嵌入在 ebay 模板中。

我发现我的#portfolio 在mobile 上显示不正确！

在desktop 上，它工作得非常好，因为它们是 col-lg-3。在移动设备上，我使用了 col-xs-6，因为我想要一个 2 x 2 网格。 问题是最后一列被拖到另一行。 请参阅上面显示我的问题的移动图像。

谁能教我一个新的 css 技巧来阻止最后一列被吸入新行？

<div id="portfolio" class="container-fluid text-center ">
    <h2><font color="#ce2065">the shills black mask</font><br><font size="1">&nbsp;</font></h2>
    <div class="row">
        <div class="col-sm-3 col-xs-6"> <img src="http://justbeauty-uk.s3.amazonaws.com/shillspoint1.jpg" class="img-responsive img-thumbnail img-circle margin" alt="Image" style="text-align: center; width: 60%;">
            <p style="text-align: center;"><span style="line-height: 1.8;">The latest trend in skincare.&nbsp;</span>Proven results with the word’s best selling black mask - loved by beauty bloggers, as seen on YouTube</p>
        </div>
        <div class="col-sm-3 col-xs-6"> <img src="http://justbeauty-uk.s3.amazonaws.com/shillspoint2.jpg" class="img-responsive img-thumbnail img-circle margin" alt="Image" style="text-align: center; width: 60%;">
            <p><span style="line-height: 1.8;">Activated charcoal quickly and effectively pulls blackheads from the root and aids skin regeneration. Promotes healthy skin too!</span></p>
        </div>
        <div class="col-sm-3 col-xs-6"> <img src="http://justbeauty-uk.s3.amazonaws.com/shillspoint3.jpg" class="img-responsive img-thumbnail img-circle margin" style="text-align: center; width: 60%;">
            <p><span style="line-height: 1.8;">Brightening naturally-derived ingredients calendula, rosemary and grapefruit help restore a plump, youthful complexion.</span></p>
        </div>
        <div class="col-sm-3 col-xs-6"> <img src="http://justbeauty-uk.s3.amazonaws.com/shillspoint2.jpg" class="img-responsive img-thumbnail img-circle margin" style="text-align: center; width: 60%;" alt="Image">
            <p><span style="line-height: 1.8;">Deeply penetrates the pores to remove acne-causing oil, which is also the main cause of acne outbreaks. Three more words.</span></p>
            <p>
                <br>
            </p>
        </div>
    </div>
</div>

CSS：

/*Portfolio items*/


    #portfolio .portfolio-item {
        margin: 0 0 15px;
        right: 0;
        border: 1px outset rgba(255, 255, 255, 0.6);
    }

    #portfolio .portfolio-item:hover {
        transition: 0.5s;
        box-shadow: 5px 10px 5px rgba(0, 0, 0, 0.9);
    }

    #portfolio .portfolio-item .portfolio-link {
        display: block;
        position: relative;
        max-width: 400px;
        margin: 0 auto;
    }

    #portfolio .portfolio-item .portfolio-link .portfolio-hover {
        background: rgba(0, 0, 0, .7);
        position: absolute;
        width: 100%;
        height: 100%;
        opacity: 0;
        transition: all ease .5s;
        -webkit-transition: all ease .5s;
        -moz-transition: all ease .5s,
    }

    #portfolio .portfolio-item .portfolio-link .portfolio-hover:hover {
        opacity: 1;
    }

    #portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content {
        position: absolute;
        width: 100%;
        height: 20px;
        font-size: 20px;
        text-align: center;
        top: 50%;
        margin-top: -12px;
        color: #fff;
    }

    #portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content i {
        margin-top: -12px;
    }

    #portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content h3,
    #portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content h4 {
        margin: 0;
    }

    #portfolio .portfolio-item .portfolio-caption {
        max-width: 400px;
        margin: 0 auto;
        background-color: rgba(0, 0, 0, 0.8);
        text-align: center;
        padding: 25px;
    }

    #portfolio .portfolio-item .portfolio-caption h4 {
        color: #fff;
        text-transform: none;
        margin: 0;
    }

    #portfolio .portfolio-item .portfolio-caption p {
        font-family: "Droid Serif", "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-style: italic;
        font-size: 13px;
        margin: 0;
    }

    #portfolio * {
        z-index: 2;
    }

    @media (min-width:767px) {
        #portfolio .portfolio-item {
            margin: 0 0 30px;
        }
    }

Answer 1

为了防止物体跳跃您需要使用clearfix，它仅对 xs 视口可见。 它看起来像：

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

所以这是一个结果代码：

<div id="portfolio" class="container-fluid text-center ">
    <h2><font color="#ce2065">the shills black mask</font><br><font size="1">&nbsp;</font></h2>
    <div class="row">
        <div class="col-sm-3 col-xs-6"> <img src="http://justbeauty-uk.s3.amazonaws.com/shillspoint1.jpg" class="img-responsive img-thumbnail img-circle margin" alt="Image" style="text-align: center; width: 60%;">
            <p style="text-align: center;"><span style="line-height: 1.8;">The latest trend in skincare.&nbsp;</span>Proven results with the word’s best selling black mask - loved by beauty bloggers, as seen on YouTube</p>
        </div>
        <div class="col-sm-3 col-xs-6"> <img src="http://justbeauty-uk.s3.amazonaws.com/shillspoint2.jpg" class="img-responsive img-thumbnail img-circle margin" alt="Image" style="text-align: center; width: 60%;">
            <p><span style="line-height: 1.8;">Activated charcoal quickly and effectively pulls blackheads from the root and aids skin regeneration. Promotes healthy skin too!</span></p>
        </div>
        <div class="clearfix visible-xs-block"></div>
        <div class="col-sm-3 col-xs-6"> <img src="http://justbeauty-uk.s3.amazonaws.com/shillspoint3.jpg" class="img-responsive img-thumbnail img-circle margin" style="text-align: center; width: 60%;">
            <p><span style="line-height: 1.8;">Brightening naturally-derived ingredients calendula, rosemary and grapefruit help restore a plump, youthful complexion.</span></p>
        </div>
        <div class="col-sm-3 col-xs-6"> <img src="http://justbeauty-uk.s3.amazonaws.com/shillspoint2.jpg" class="img-responsive img-thumbnail img-circle margin" style="text-align: center; width: 60%;" alt="Image">
            <p><span style="line-height: 1.8;">Deeply penetrates the pores to remove acne-causing oil, which is also the main cause of acne outbreaks. Three more words.</span></p>
            <p>
                <br>
            </p>
        </div>
    </div>
</div>