如何使Bootstrap3缩略图内的内容一直流到边缘?

时间:2013-12-03 10:51:24

标签: html css twitter-bootstrap-3

见下图。我希望内容一直延伸到圆角。

请注意,此内容不仅仅是图片,还可以包含叠加层(.item-screen)

Markup看起来像:

<div class="col-sm-6">
  <div class="thumbnail">
    <div class="item-picture">
      <a href="blah">
        <img src="blah" class="img-responsive"/>
      </a>
      <div class="item-screen"></div>
    </div>
  <div class="caption">dark picture</div>
  ...
</div>

enter image description here

2 个答案:

答案 0 :(得分:1)

当您组合一个简单的example并使用某些浏览器工具时,您会看到应用于4px的小填充div.thumbnail。要将图片扩展到边框,请删除该填充

div.thumbnail {
    padding: 0;
}

JSFiddle

如果你想将填充保持在底部,你可以

div.thumbnail {
    padding-top: 0;
    padding-right: 0;
    padding-left: 0;
}

并且image有圆角

<img src="..." class="img-rounded"/>

JSFiddle

答案 1 :(得分:0)

在Olaf指出我可以移除填充

之后再看一眼

我最终应用了以下CSS:

.item a img {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border: 0px solid transparent;
}
.item .thumbnail { padding: 0px; }

之前我尝试添加边框半径,但直到我意识到你可以制作一个透明的边框,它看起来很难看