引导程序3仅在移动设备上打破了行 [英] Bootstrap 3 broken row on mobile only

问题描述

我的bootstrap 3和一些缩略图存在问题，虽然我使用的是相同的代码，图像大小完全相同，但只有在垂直方向上，最后一个图像行在移动设备上被破坏

以下是代码：

 < div class =container> 
< div class =row> 
< div class =col-lg-3 col-md-4 col-xs-6 thumb> 
< a class =thumbnailhref =？service = 4> 
< img class =img-responsivesrc =http：//mysite/tn-1_256x300.jpgalt => 
< div class =text-center text_margin>造型< / div> 
< / a> 
< / div> 
 
< div class =col-lg-3 col-md-4 col-xs-6 thumb> 
< a class =thumbnailhref =？service = 5> 
< img class =img-responsivesrc =http：//mysite/tn-2_256x300.jpgalt => 
< div class =text-center text_margin> color< / div> 
< / a> 
< / div> 
 
< div class =col-lg-3 col-md-4 col-xs-6 thumb> 
< a class =thumbnailhref =？service = 6> 
 < div class =text-center text_margin> extensions< / div> 
< / a> 
< / div> 
 
< div class =col-lg-3 col-md-4 col-xs-6 thumb> 
< a class =thumbnailhref =？service = 7> 
< img class =img-responsivesrc =http：//mysite/tn-4_256x300.jpgalt => 
< div class =text-center text_margin>头发增强< / div> 
< / a> 
< / div> 
 
< div class =col-lg-3 col-md-4 col-xs-6 thumb> 
< a class =thumbnailhref =？service = 8> 
 < div class =text-center text_margin>平滑处理< / div> 
< / a> 
< / div> 
 
< div class =col-lg-3 col-md-4 col-xs-6 thumb> 
< a class =thumbnailhref =？service = 9> 
 < div class =text-center text_margin>发起< / div> 
< / a> 
< / div> 
 
< div class =col-lg-3 col-md-4 col-xs-6 thumb> 
 < img class =img-responsivesrc =http：//mysite/tn-7_256x300.jpgalt => 
< div class =text-center text_margin>认识团队< / div> 
< / a> 
< / div> 
 
< div class =col-lg-3 col-md-4 col-xs-6 thumb> 
< a class =thumbnailhref =/ price-list /> 
< img class =img-responsivesrc =http：//mysite/tn-8_256x300.jpgalt => 
< div class =text-center text_margin>价目表< / div> 
< / a> 
< / div> 
< / div><！ - 结束行 - > 
< / div><！ - 结束容器 - > 
  

解决方案

这是因为缩略图下方的部分文字正在包裹，结果缩略图高度不同。解决这个问题的一种方法是清除移动CSS上的列float。

  @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

I am having a problem with bootstrap 3 and some thumbnails where although I'm using the same code and the image sizes are exactly the same the last image row is broken on mobile when in vertical only

Here is the code:

<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-->

解决方案

This is happening because some of the text below the thumbnails is wrapping, and as a result the thumbnail heights are different. One way to fix this problem is to clear the columns float on mobile with CSS like this..

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

Demo 1: http://codeply.com/go/Bgt8JFkPht

Another option (simpler), is to use CSS text-overflow ellipsis on the text DIV's since it's these DIVs that are causing the height to be different on each thumbnail. When the thumbnail heights are the same, the row wrapping is not an issue..

Demo 2: http://codeply.com/go/5uOP4bM5pk

这篇关于引导程序3仅在移动设备上打破了行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！