摆脱 Twitter Bootstrap 缩略图边框

Question

我想要在 Twitter Bootstrap 中去除默认缩略图的细灰色边框。

我可以选择目标边框，例如如果我使用：

.thumbnails > li { border:1px solid red; }

所有缩略图的边框都会变成红色。

但是，如果我使用：

.thumbnails > li { border:0; }

即使使用这种方法，边框还是会有一条细细的灰线。我无法消除它。我尝试将颜色更改为白色（我的背景是白色，所以这可能是一个解决方案），但它不起作用。

我该如何去掉这条细细的灰色边框？

- Jorge

Answer 1

缩略图边框应用于.thumbnail元素，位于<li>内部。无论如何，您所说的“额外”细线可能是应用于该类的box-shadow。

因此，您可以尝试：

.thumbnail {
    border: 0 none;
    box-shadow: none;
}

- albertedevigo

Answer 2

我遇到了同样的问题，但无论将边框还是阴影设置为0都没有用。最终，我通过将thumbnail类的背景设置为透明来去掉边框。

像这样：

.thumbnail{
  background: transparent;
}

- Elliot Tregoning

Answer 3

如果@albertedevigo建议的方法不起作用，则尝试将类从“img-thumbnail”更改为“img-responsive”。

.img-responsive类应用display: block;和max-width: 100％;和height: auto;到图像。

HTML

    <div class="row no-pad">
          <div class="col-md-2"><img src="E:\VIPUL\Adobe Lightroom\Modified\Awesome.jpg" 
class="img-responsive"  alt="Awesome.jpg">
        </div>
       </div>

CSS

     .row.no-pad.img-responsive{
      margin-right:0px;
      margin-left:0px;
      border:none;
    }

干杯!

- Vipul Sharma

Answer 4

在我的BootStrap版本中，应该是这样的：

img.wp-post-image {

    border-radius: 3px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

将它们都设置为0，然后它就起作用了。

img.wp-post-image {

    border-radius: 0;
    box-shadow: 0;
}

- chau

Answer 5

不要惊慌 :)

只需将此内容复制并粘贴到您的style.css文件中即可。

.thumbnail {
    display: contents;
}

- Ali.Ghodrat

Answer 6

在Bootstrap 3.3.6中，可以在bootstrap.css文件中找到它。

.thumbnail{
  display: block;
  padding: 4px;
  margin-bottom: 20px;
  line-height: 1.42857143;
  background-color: #74003;
  **border: 1px solid #ddd;** 
  border-radius: 4px;
  -webkit-transition: border .2s ease-in-out;
  -o-transition: border .2s ease-in-out;
  transition: border .2s ease-in-out;
 }

- differentgeneration

Answer 7

你只能摆脱它！Holaa

.img-responsive {
 width:100%;
 border:none;
}

- Emre