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

Question

我正在尝试让我的设计做出回应。到目前为止我已经取得了成功，但我在调整方面遇到了一些问题。如下图所示，设计朝向左侧。红色框是页面的实际中心（稍后绘制）： enter image description here

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

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

enter image description here

这看起来非常奇怪，我想要适合2个缩略图，只要它可以杂乱自由地容纳它们。我添加了col-sm-6类，但它的表现并不完全不同。我无法添加col-xs-6，因为在极小的设备上，我只想看到1个缩略图。

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

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

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

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

enter image description here

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

enter image description here

所以，这就是我所做的：

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

然而，这确实浪费了空间：

enter image description here

有没有一种方法，即使在小规模的尺寸，网站显示2个缩略图，直到它混乱？

网站hosted位于同一位置，HTML and CSS files也是如此。

Answer 1

将thumnail类的宽度设置为100％而不是200px。如果要为其他分辨率设置宽度，请考虑使用min-width

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

问题2的原因：Bootstrap设置为Mobile First，因为您只使用了col-md-3＆amp; 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

您应该在问题中发布相关代码并制作小提琴或JSBin。对于你想要做的事情，我不会使用缩略图类，因为你必须在那上面覆盖样式。你需要一个围绕图像和标题的包装器，以便悬停处理知道在哪里定位自己。我还为480px到767px添加了一个网格。我发现使用更大的图像会更好，这样当它缩小尺寸时，它仍会填充包装纸的宽度，除非你在图像上使用100％（不是最小宽度）。

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

HTML（需要.container＆gt; .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%
    }
}

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

2 个答案:

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