Twitter Bootstrap：以小分辨率并排放置元素？

Question

我正在努力使我的设计具有响应性。到目前为止，我一直很成功，但我在对齐方面遇到了一些问题。 就像你在下图中看到的那样，设计是向左的。红框是页面的实际中心（稍后绘制）：

这不应该发生，因为我已将 div 包含在容器类中。为什么它还在发生？我希望标题和缩略图始终位于页面的完美中心。

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

这看起来非常奇怪，我想放入 2 个缩略图，只要它可以无杂乱地容纳它们。我添加了 col-sm-6 类，但它的行为仍然没有太大不同。我无法添加 col-xs-6，因为在极小的设备上，我只想看到 1 个缩略图。

所以我相信我们必须为此编写媒体查询？应该怎么做？

HTML/CSS 文件为 here，网站托管在 here。

实施@The Indian Programmer 建议的更改：

1. 嘿，这有效（有问题）！为什么让它 200px 扭曲中心对齐？ 制作宽度：100% 自动导致我的悬停状态动画溢出图像。我们如何解决这个问题？

1. 不！我不希望它是 col-xs-6。也就是说，我不想在小型设备中使用 2 个缩略图。外观是这样的：

所以，这就是我所做的：

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

但是，这确实浪费空间：

有没有一种方法可以使网站即使在小尺寸的情况下也能显示 2 个缩略图直到变得混乱？

网站是 hosted 在同一个地方，HTML and CSS files 也是。

Answer 1

将缩略图类的宽度设置为 100%，而不是 200 像素。如果要为其他分辨率设置宽度，请考虑使用 min-width

.thumbnail{
    position:relative;
    height:200px;
    width:auto;
}

问题 2 的原因：Bootstrap 设置为 Mobile First，并且由于您只使用了 col-md-3 和 col-sm-6，因此当浏览器宽度低于 768px 时，它会考虑 col-xs-12。

<div class="col-md-3 col-sm-6 col-xs-6">
   <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>

Answer 2

您应该在问题中发布相关代码并制作 Fiddle 或 JSBin。对于您要执行的操作，我不会使用缩略图类，因为您必须在其上覆盖样式。您需要围绕图像和标题进行包装，以便悬停处理知道将自身定位在哪里。我还添加了一个 480 像素到 767 像素的网格。我发现最好使用更大的图像，这样当它缩小时，它仍然会填充包装器的宽度，除非你在图像上使用 100%（不是最小宽度）。

演示：http://jsbin.com/xujum/2/

---

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

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