本文介绍了Twitter Bootstrap：将元素并排放在小分辨率？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想让我的设计响应。我已经成功了，但我有一些问题的对齐。
像你在下面的图片中看到的，设计是向左。红色框是页面的实际中心（稍后绘制）：

这不应该发生，因为我把div包含在容器类中。为什么仍然发生？我想让标题和缩略图始终在页面的完美中心。

还有另一个问题略有不同。在缩小浏览器尺寸的同时，即使浏览器有空间可容纳2个缩略图，但仍只显示一个。

这看起来很奇怪，我想适合2张缩略图因为它可以杂乱自由地容纳他们。我添加了col-sm-6类，但是它的行为却不尽相同。我不能添加col-xs-6，因为在极小的设备上，我只想看到一个缩略图。

因此，我相信我们必须为此编写媒体查询？应该怎么办？

HTML / CSS文件是，因此。

解决方案

您应该在问题中发布相关代码， JSBin。对于你想要做的，我不会使用缩略图类，因为你必须超越的风格。你需要一个包装图像和标题，以便悬浮处理知道在哪里定位本身。我还添加了一个480px到767px的网格。我发现它更好地使用较大的图像，所以当它的大小，它仍然填充包装的宽度，除非你使用100％的图像（不是最小宽度）。

演示：

HTML（需要.container> .row模式）：

 < div class =col-sm-6 col-md-3 col-ms-6 text-center hover-me> 
< div class =inside> 
< img src =http://lorempixel.com/g/400/400/alt =class =center-block> 
< div class =caption> 
< div class =btn-group btn-trigger> 
< a href =＃class =btn btn-default web-link> Link< / a> 
< a href =＃class =btn btn-default more-info>更多< / a> 
< / div>< / div> 
<！ -  End Caption  - > 
< / div> 
< h5>艺术家名称2，city< / h5> 
 
< / div> <！ -  / col- *  - >

CSS

  .hover-me {
 margin-bottom：20px 
} 
 
 .hover-me .inner {
 position ：相对; 
 overflow：hidden; 
} 
 
 .hover-me .inner：before {
 content：; 
 position：absolute; 
 top：-100％; 
 left：0; 
 width：100％; 
 height：100％; 
 transition：all .5s ease-in-out; 
} 
 
 .hover-me：hover .inner：before {
 top：0; 
 background：rgba（18,129,140，.50）; 
} 
 
 .hover-me .caption {
 position：absolute; 
 width：100％; 
 top：-100px; 
} 
 
 .hover-me：hover .caption {
 top：50％; 
 margin-top：-20px; 
 transition：all .5s ease-in-out; 
} 
 
 .hover-me img {
 max-width：100％; 
 display：block; 
} 
 
 @media（min-width：1200px）{
 .container {
 border：1px solid red 
} 
 
 .hover-me img {
 max-width：200px; 
 height：auto; 
} 
 
 .hover-me .inner {
 max-width：200px; 
 margin：0 auto; 
} 
} 
 
 / * ------------------------------ -------------------------------------------------- -------------------------------------------------- -  
 bootstrap columns为480px  -  767px == col-ms- * //没有响应的实用程序
 ------------------ -------------------------------------------------- -------------------------------------------------- --------------- * / 
 
 @media（min-width：480px）and（max-width：767px）{
 .col- ms-1，
 .col-ms-2，
 .col-ms-3，
 .col-ms-4，
 .col-ms-5，
 .col-ms-6，
 .col-ms-7，
 .col-ms-8，
 .col-ms-9，
 .col-ms -10，
 .col-ms-11，
 .col-ms-12 {
 float：left; 
 position：relative; 
 min-height：1px; 
 padding-left：2％; 
 padding-right：2％; 
} 
 
 .col-ms-12 {
 width：100％
} 
 
 .col-ms-11 {
 width：91.66666666666666％
} 
 
 .col-ms-10 {
 width：83.33333333333334％
} 
 
 .col- ms-9 {
 width：75％
} 
 
 .col-ms-8 {
 width：66.66666666666666％
} 
 
 .col-ms-7 {
 width：58.333333333333336％
} 
 
 .col-ms-6 {
 width：50％
 } 
 
 .col-ms-5 {
 width：41.66666666666667％
} 
 
 .col-ms-4 {
 width： 33.33333333333333％
} 
 
 .col-ms-3 {
 width：25％
} 
 
 .col-ms-2 { 
 width：16.666666666666664％
} 
 
 .col-ms-1 {
 width：8.333333333333332％
} 
 
。 col-ms-pull-12 {
 right：100％
} 
 
 .col-ms-pull-11 {
 right：91.66666666666666％
 } 
 
 .col-ms-pull-10 {
 right：83.33333333333334% 
} 
 
 .col-ms-pull-9 {
 right：75％
} 
 
 .col-ms-pull-8 {
 right：66.66666666666666％
} 
 
。 col-ms-pull-7 {
 right：58.333333333333336％
} 
 
 .col-ms-pull-6 {
 right：50％
 } 
 
 .col-ms-pull-5 {
 right：41.66666666666667％
} 
 
 .col-ms-pull-4 {
 right：33.33333333333333％
} 
 
 .col-ms-pull-3 {
 right：25％
} 
 
。 col-ms-pull-2 {
 right：16.666666666666664％
} 
 
 .col-ms-pull-1 {
 right：8.333333333333332％
 } 
 
 .col-ms-pull-0 {
 right：0％
} 
 
 .col-ms-push-12 {
 left：100％
} 
 
 .col-ms-push-11 {
 left：91.66666666666666％
} 
 
。 col-ms-push-10 {
 left：83.33333333333334％
} 
 
 .col-ms-push-9 {
 left：75％
 } 
 
 .col-ms-push-8 {
 left：66.66666666666666％
} 
 
 .col-ms-push-7 {
 left：58.333333333333336％
} 
 
 .col-ms-push-6 {
 left：50％
} 
 
。 col-ms-push-5 {
 left：41.66666666666667％
} 
 
 .col-ms-push-4 {
 left：33.33333333333333％
 } 
 
 .col-ms-push-3 {
 left：25％
} 
 
 .col-ms-push-2 {
 left：16.666666666666664％
} 
 
 .col-ms-push-1 {
 left：8.333333333333332％
} 
 
。 col-ms-push-0 {
 left：0％
} 
 
 .col-ms-offset-12 {
 margin-left：100％
} 
 
 .col-ms-offset-11 {
 margin-left：91.66666666666666％
} 
 
 .col-ms-offset- 10 {
 margin-left：83.33333333333334％
} 
 
 .col-ms-offset-9 {
 margin-left：75％
} 
 
 .col-ms-offset-8 {
 margin-left：66.66666666666666％
} 
 
 .col-ms-offset-7 {
 margin-left：58.333333333333336％
} 
 
 .col-ms-offset-6 {
 margin-left：50％
} 
 
 .col-ms-offset-5 {
 margin-left：41.66666666666667％
} 
 
 .col-ms-offset-4 {
 margin- left：33.33333333333333％
} 
 
 .col-ms-offset-3 {
 margin-left：25％
} 
 
。 col-ms-offset-2 {
 margin-left：16.666666666666664％
} 
 
 .col-ms-offset-1 {
 margin-left：8.333333333333332％ 
} 
 
 .col-ms-offset-0 {
 margin-left：0％
} 
}

I'm trying to make my design responsive. I have been successful so far but I am having some issues with the alignment. Like you see in the picture below, The design is towards the left. The red box is the actual center of the page ( drawn later):

This should not happen since I have enclosed the div inside a container class. Why is it still happening? I want both the Headings and the thumbnails to always be in perfect center of the page.

There's another issue which is slightly different. On downsizing the browser, Even though the browser has space to accommodate 2 thumbnails side by side, still it only displays one.

This is looking extremely odd and I want to fit in 2 thumbnails as far as it can clutter free accommodate them. I added the col-sm-6 class, but still it does not behave very differently. I cannot add the col-xs-6 since on extremely small devices, I want only 1 thumbnail to be seen.

So I believe we'll have to write media queries for this? What should be done?

The HTML/CSS files are here and the website is hosted here.

Implementing the changes Suggested by @The Indian Programmer:

Hey, That worked ( With a problem)! Why was making it 200px distorting the center alignment?Making the width: 100% auto is causing my hover state animation to spill outside the image. How do we tackle that?

No! I dont want it to be col-xs-6. That is, I dont want 2 thumbnails in small scale devices. This is how it looks:

So, This is what I've done:

<div class="col-md-3 col-sm-6 col-xs-12">
   <div class="thumbnail">
        <img src="images/Layer26.png" alt="" class="img-responsive">
        <div class="caption">
        <!-- Start Caption -->
            <div class="btn-group btn-trigger">
                <a href="#" class="btn btn-default web-link">Link</a>
                <a href="#" class="btn btn-default more-info">More</a>                                        
            </div>
        </div>
        <!-- End Caption -->                  
   </div>
   <h5 class="text-center">Artist Name 2, city</h5>
</div>

However, That does waste space:

Is there a way in which even in small scale dimensions, the website shows 2 thumbnails until it clutters?

The website is hosted at the same place and so are the HTML and CSS files.

解决方案

You should post your relevant code in the question and make a Fiddle or JSBin. For what you're seeking to do, I would not use the thumbnail class since you have to over-ride styles on that. You need a wrapper around the image and the caption so that the hover treatment knows where to position itself. I also added a grid for 480px to 767px. I found it better to use larger images so that when it sizes down, it still fills the width of the wrapper, unless you use 100% on the image (not min-width).

DEMO: http://jsbin.com/xujum/2/

HTML (needs the .container > .row pattern):

<div class="col-sm-6 col-md-3 col-ms-6 text-center hover-me">
        <div class="inner">
<img src="http://lorempixel.com/g/400/400/" alt="" class="center-block">          
        <div class="caption">
            <div class="btn-group btn-trigger">
                <a href="#" class="btn btn-default web-link">Link</a>
                <a href="#" class="btn btn-default more-info">More</a>                                        
            </div></div>
        <!-- End Caption -->                  
   </div>
   <h5>Artist Name 2, city</h5>

</div>  <!-- /col-* -->

CSS

.hover-me {
    margin-bottom: 20px
}

.hover-me .inner {
    position: relative;
    overflow: hidden;
}

.hover-me .inner:before {
    content: " ";
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    transition: all .5s ease-in-out;
}

.hover-me:hover .inner:before {
    top: 0;
    background: rgba(18,129,140,.50);
}

.hover-me .caption {
    position: absolute;
    width: 100%;
    top: -100px;
}

.hover-me:hover .caption {
    top: 50%;
    margin-top: -20px;
    transition: all .5s ease-in-out;
}

.hover-me img {
    max-width: 100%;
    display: block;
}

@media (min-width:1200px) { 
    .container {
        border: 1px solid red
    }

    .hover-me img {
        max-width: 200px;
        height: auto;
    }

    .hover-me .inner {
        max-width: 200px;
        margin: 0 auto;
    }
}

/*------------------------------------------------------------------------------------------------------------------------------------
  bootstrap columns for 480px - 767px == col-ms-* // there are no responsive utilities for this
-------------------------------------------------------------------------------------------------------------------------------------*/

@media (min-width: 480px) and (max-width: 767px) { 
    .col-ms-1,
    .col-ms-2,
    .col-ms-3,
    .col-ms-4,
    .col-ms-5,
    .col-ms-6,
    .col-ms-7,
    .col-ms-8,
    .col-ms-9,
    .col-ms-10,
    .col-ms-11,
    .col-ms-12 {
        float: left;
        position: relative;
        min-height: 1px;
        padding-left: 2%;
        padding-right: 2%;
    }

    .col-ms-12 {
        width: 100%
    }

    .col-ms-11 {
        width: 91.66666666666666%
    }

    .col-ms-10 {
        width: 83.33333333333334%
    }

    .col-ms-9 {
        width: 75%
    }

    .col-ms-8 {
        width: 66.66666666666666%
    }

    .col-ms-7 {
        width: 58.333333333333336%
    }

    .col-ms-6 {
        width: 50%
    }

    .col-ms-5 {
        width: 41.66666666666667%
    }

    .col-ms-4 {
        width: 33.33333333333333%
    }

    .col-ms-3 {
        width: 25%
    }

    .col-ms-2 {
        width: 16.666666666666664%
    }

    .col-ms-1 {
        width: 8.333333333333332%
    }

    .col-ms-pull-12 {
        right: 100%
    }

    .col-ms-pull-11 {
        right: 91.66666666666666%
    }

    .col-ms-pull-10 {
        right: 83.33333333333334%
    }

    .col-ms-pull-9 {
        right: 75%
    }

    .col-ms-pull-8 {
        right: 66.66666666666666%
    }

    .col-ms-pull-7 {
        right: 58.333333333333336%
    }

    .col-ms-pull-6 {
        right: 50%
    }

    .col-ms-pull-5 {
        right: 41.66666666666667%
    }

    .col-ms-pull-4 {
        right: 33.33333333333333%
    }

    .col-ms-pull-3 {
        right: 25%
    }

    .col-ms-pull-2 {
        right: 16.666666666666664%
    }

    .col-ms-pull-1 {
        right: 8.333333333333332%
    }

    .col-ms-pull-0 {
        right: 0%
    }

    .col-ms-push-12 {
        left: 100%
    }

    .col-ms-push-11 {
        left: 91.66666666666666%
    }

    .col-ms-push-10 {
        left: 83.33333333333334%
    }

    .col-ms-push-9 {
        left: 75%
    }

    .col-ms-push-8 {
        left: 66.66666666666666%
    }

    .col-ms-push-7 {
        left: 58.333333333333336%
    }

    .col-ms-push-6 {
        left: 50%
    }

    .col-ms-push-5 {
        left: 41.66666666666667%
    }

    .col-ms-push-4 {
        left: 33.33333333333333%
    }

    .col-ms-push-3 {
        left: 25%
    }

    .col-ms-push-2 {
        left: 16.666666666666664%
    }

    .col-ms-push-1 {
        left: 8.333333333333332%
    }

    .col-ms-push-0 {
        left: 0%
    }

    .col-ms-offset-12 {
        margin-left: 100%
    }

    .col-ms-offset-11 {
        margin-left: 91.66666666666666%
    }

    .col-ms-offset-10 {
        margin-left: 83.33333333333334%
    }

    .col-ms-offset-9 {
        margin-left: 75%
    }

    .col-ms-offset-8 {
        margin-left: 66.66666666666666%
    }

    .col-ms-offset-7 {
        margin-left: 58.333333333333336%
    }

    .col-ms-offset-6 {
        margin-left: 50%
    }

    .col-ms-offset-5 {
        margin-left: 41.66666666666667%
    }

    .col-ms-offset-4 {
        margin-left: 33.33333333333333%
    }

    .col-ms-offset-3 {
        margin-left: 25%
    }

    .col-ms-offset-2 {
        margin-left: 16.666666666666664%
    }

    .col-ms-offset-1 {
        margin-left: 8.333333333333332%
    }

    .col-ms-offset-0 {
        margin-left: 0%
    }
}

这篇关于Twitter Bootstrap：将元素并排放在小分辨率？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！