html - 推特 Bootstrap : Place elements side by side in small resolution?

Question

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

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

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

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

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

HTML/CSS 文件是 here网站托管here .

实现@The Indian Programmer 建议的更改:

1. 嘿，成功了(有问题)!为什么将它设置为 200px 会扭曲中心对齐？将 width: 100% auto 设置为 auto 会导致我的悬停状态动画溢出图像。我们如何解决这个问题？

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 设置为移动优先，并且由于您只使用了 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>