我想要在 Twitter Bootstrap 中去除默认缩略图的细灰色边框。
我可以选择目标边框,例如如果我使用:
.thumbnails > li { border:1px solid red; }
所有缩略图的边框都会变成红色。但是,如果我使用:
.thumbnails > li { border:0; }
即使使用这种方法,边框还是会有一条细细的灰线。我无法消除它。我尝试将颜色更改为白色(我的背景是白色,所以这可能是一个解决方案),但它不起作用。
我该如何去掉这条细细的灰色边框?
我想要在 Twitter Bootstrap 中去除默认缩略图的细灰色边框。
我可以选择目标边框,例如如果我使用:
.thumbnails > li { border:1px solid red; }
所有缩略图的边框都会变成红色。.thumbnails > li { border:0; }
即使使用这种方法,边框还是会有一条细细的灰线。我无法消除它。我尝试将颜色更改为白色(我的背景是白色,所以这可能是一个解决方案),但它不起作用。
我该如何去掉这条细细的灰色边框?
缩略图边框应用于.thumbnail
元素,位于<li>
内部。无论如何,您所说的“额外”细线可能是应用于该类的box-shadow
。
因此,您可以尝试:
.thumbnail {
border: 0 none;
box-shadow: none;
}
我遇到了同样的问题,但无论将边框还是阴影设置为0都没有用。最终,我通过将thumbnail类的背景设置为透明来去掉边框。
像这样:
.thumbnail{
background: transparent;
}
如果@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;
}
干杯!
img.wp-post-image {
border-radius: 3px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}
img.wp-post-image {
border-radius: 0;
box-shadow: 0;
}
不要惊慌 :)
只需将此内容复制并粘贴到您的style.css文件中即可。
.thumbnail {
display: contents;
}
.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;
}
你只能摆脱它!Holaa
.img-responsive {
width:100%;
border:none;
}