html - Bootstrap 3断行仅在移动设备上

我在使用bootstrap 3和一些缩略图时遇到了问题，尽管我使用的是相同的代码，并且图像大小完全相同，但仅在垂直方向上，移动设备上的最后一个图像行已损坏

这是代码：

<div class="container">
    <div class="row">
        <div class="col-lg-3 col-md-4 col-xs-6 thumb">
            <a class="thumbnail" href="?service=4">
                <img class="img-responsive" src="http://mysite/tn-1_256x300.jpg" alt="">
                <div class="text-center text_margin">styling</div>
            </a>
        </div>

        <div class="col-lg-3 col-md-4 col-xs-6 thumb">
            <a class="thumbnail" href="?service=5">
                <img class="img-responsive" src="http://mysite/tn-2_256x300.jpg" alt="">
                <div class="text-center text_margin">colour</div>
            </a>
        </div>

        <div class="col-lg-3 col-md-4 col-xs-6 thumb">
            <a class="thumbnail" href="?service=6">
                <img class="img-responsive" src="http://mysite/tn-3_256x300.jpg" alt="">
                <div class="text-center text_margin">extensions</div>
            </a>
        </div>

        <div class="col-lg-3 col-md-4 col-xs-6 thumb">
            <a class="thumbnail" href="?service=7">
                <img class="img-responsive" src="http://mysite/tn-4_256x300.jpg" alt="">
                <div class="text-center text_margin">hair enhancements</div>
            </a>
        </div>

        <div class="col-lg-3 col-md-4 col-xs-6 thumb">
            <a class="thumbnail" href="?service=8">
                <img class="img-responsive" src="http://mysite/tn-5_256x300.jpg" alt="">
                <div class="text-center text_margin">smoothing treatment</div>
            </a>
        </div>

        <div class="col-lg-3 col-md-4 col-xs-6 thumb">
            <a class="thumbnail" href="?service=9">
                <img class="img-responsive" src="http://mysite/tn-6_256x300.jpg" alt="">
                <div class="text-center text_margin">hair up</div>
            </a>
        </div>

        <div class="col-lg-3 col-md-4 col-xs-6 thumb">
            <a class="thumbnail" href="meet-the-team">
                <img class="img-responsive" src="http://mysite/tn-7_256x300.jpg" alt="">
                <div class="text-center text_margin">meet the team</div>
            </a>
        </div>

        <div class="col-lg-3 col-md-4 col-xs-6 thumb">
            <a class="thumbnail" href="/price-list/">
                <img class="img-responsive" src="http://mysite/tn-8_256x300.jpg" alt="">
                <div class="text-center text_margin">price list</div>
            </a>
        </div>
    </div><!--end row-->
</div><!--end container-->

最佳答案

之所以发生这种情况，是因为缩略图下方的某些文本会自动换行，因此缩略图的高度会有所不同。解决此问题的一种方法是使用CSS清除移动设备上浮动的列。

@media (max-width: 768px) {
    .row > .col-xs-6:nth-child(2n+1) {
        clear: left;
    }
}

演示1：http://codeply.com/go/Bgt8JFkPht

另一个选择（更简单）是在文本DIV上使用CSS文本溢出省略号，因为正是这些DIV导致了每个缩略图上的高度都不同。当缩略图高度相同时，行换行不是问题。

演示2：http://codeply.com/go/5uOP4bM5pk

关于html - Bootstrap 3断行仅在移动设备上，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30812574/