如何在大屏幕中制作Bootstrap 3 .thumbnail Full？

Question

请你看看this demo，让我知道如何在大屏幕中的Bootstrap 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>

Fiddle

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

工作fiddle