Question

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

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

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

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

但如果我使用：

.thumbnails > li { border:0; }

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

如何摆脱那薄薄的灰色边框？

Answer 1

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

所以你可以尝试：

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

Answer 2

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

像这样：

kind(111111111111)

Answer 3

在我的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;
}

Answer 4

如果@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;
    }

干杯！

Answer 5

你只能使用摆脱它！ Holaa

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

Answer 6

不要惊慌：）

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

即可

.thumbnail {
    display: contents;
}

Answer 7

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

摆脱Twitter Bootstrap缩略图边框

7 个答案: