12

我正在尝试摆脱 Twitter Bootstrap 中默认的缩略图薄灰色边框。

我可以定位边界，例如，如果我使用：

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

所有缩略图边框都变为红色。

但如果我使用：

.thumbnails > li { border:0; }

它仍然留下一条灰色细线的边界。我无法摆脱它。我试图将颜色更改为白色（我的背景是白色的，所以它可能是一个解决方案）但它不起作用。

我怎样才能摆脱那个细的灰色边框？

4

7 回答 7

33

.thumbnail缩略图边框应用于<li>. 无论如何，您所说的“额外”细线可能box-shadow适用于该课程。

所以你可以试试：

.thumbnail {
    border: 0 none;
    box-shadow: none;
}
于 2013-05-03T11:55:27.690 回答
3

我遇到了同样的问题，但是将边框或 box-shadow 设置为 0 都没有为我工作。我终于能够通过将缩略图类的背景设置为透明来删除边框。

像这样：

.thumbnail{
  background: transparent;
}
于 2016-01-24T10:20:07.523 回答
2

在我的 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;
}
于 2014-04-15T03:27:23.470 回答
2

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

.img-responsive 类应用 display: block; 和最大宽度：100%；和高度：自动；到图像。

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

干杯!

于 2016-03-18T06:44:56.797 回答
1

不要恐慌 ：）

只需将其复制并粘贴到您的 style.css

.thumbnail {
    display: contents;
}
于 2018-04-20T11:32:59.423 回答
0

你只能用摆脱它！霍拉

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

于 2017-02-02T07:59:29.913 回答
0

在 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;
 }
于 2018-04-29T17:05:50.347 回答