如何使引导带3 .thumbnail在大屏幕上充满？

Question

请您看一下这个演示，让我知道如何在像这张图像的大屏幕上的引导带3中有水平缩略图。

​

​

就像你在左边看到的，我有一个普通的拇指钉，我想把它改成大屏幕上的全宽水平，桌子和智能手机上的普通拇指钉。

我已经试过了

.thumbnail.right-caption > img {
    float: left;
    margin-right: 9px;
}

.thumbnail.right-caption {
    float: left;
}

.thumbnail.right-caption > .caption {
    padding: 4px;
}

但它不起作用！

Answer 1

您需要遵循类似于以下的格式：

<div class="container">
    <div class="row">
        <div class="col-sm-12 col-md-6 col-lg-4">
            <img src="http://pizzafactorytricity.ca/home/wp-content/uploads/2011/07/3-pizza4-300x282.jpg" alt="..."/>
        </div>

        <div class="col-sm-12 col-md-6 col-lg-8">
            <div class="caption">
              <h3>Thumbnail label</h3>
              <p>...</p>
              <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
            </div>            
        </div>
    </div>
</div>

小提琴

Answer 2

我的建议是使用display: table-cell属性和媒体查询的组合。理论上说，当你在桌面上时，缩略图就像表格一样(所以图像和内容是相邻的)，但是当你使用移动分辨率时，它们就像块元素(因此是一个以上的元素)。

在HTML方面，您只需要为图像添加包装器div和一些类，我称之为.image。

其余的魔术发生在CSS方面。

.image {
  display: table-cell;    
}

.caption {
  width: 100%;
  display: table-cell;
  vertical-align: top;
}

@media (max-width: 768px) {
  .image, .caption {
    display: block; 
  }   
}

工作小提琴