如何在大屏幕上制作 Bootstrap 3 .thumbnail 全图？

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 属性和媒体查询。理论上，当您在桌面上时，缩略图的行为类似于 table（因此图像和内容彼此相邻），但当您在移动分辨率下时，它们充当块元素（因此一个在另一个之上）。

在 HTML 方面，您只需要为带有一些 class 的图像添加包装器 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

如何在大屏幕上制作 Bootstrap 3 .thumbnail 全图？

How to Make Bootstrap 3 .thumbnail Full With in Large Screens?

twitter-bootstrap

twitter-bootstrap-3