twitter-bootstrap 摆脱 Twitter Bootstrap 缩略图边框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16352641/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Getting rid of Twitter Bootstrap thumbnail border
提问by Jorge
I'm trying to get rid of the default thumbnail thin grey border in Twitter Bootstrap.
我正在尝试摆脱 Twitter Bootstrap 中默认的缩略图细灰色边框。
I can target the borders, for example if I use:
我可以定位边界，例如，如果我使用：
.thumbnails > li { border:1px solid red; }
all the thumbnail borders change to red.
所有缩略图边框都变为红色。
But if I use:
但如果我使用：
.thumbnails > li { border:0; }
it still leaves the borders with a thin grey line. I cannot get rid of that. I've tried to change the color to white (my background is white, so it could be a solution) but it doesn't work.
它仍然用细灰线留下边界。我无法摆脱它。我试图将颜色更改为白色（我的背景是白色，所以它可能是一个解决方案）但它不起作用。
How can I get rid of that thin grey border?
我怎样才能摆脱那个细的灰色边框？
回答by albertedevigo
Thumbnail borders are applied to the .thumbnailelement, inside the <li>. Anyway, the "extra" thin line you talk about could be the box-shadowapplied to that class.
缩略图边框应用于.thumbnail元素，在<li>. 无论如何，您谈论的“额外”细线可能box-shadow适用于该课程。
So you can try:
所以你可以试试：
.thumbnail {
border: 0 none;
box-shadow: none;
}
回答by Elliot Tregoning
I ran into this same problem but neither setting the border or the box-shadow to 0 worked for me. I was finally able to remove the border by setting the background of the thumbnail class to transparent.
我遇到了同样的问题，但将边框或框阴影设置为 0 都不适合我。我终于能够通过将缩略图类的背景设置为透明来移除边框。
Like this:
像这样：
.thumbnail{
background: transparent;
}
回答by Vipul Sharma
If the method advised by @albertedevigo doesn't work then try changing the class from 'img-thumbnail' to 'img-responsive'.
如果@albertedevigo 建议的方法不起作用，请尝试将类从 'img-thumbnail' 更改为 'img-responsive'。
The .img-responsive class applies display: block; and max-width: 100%; and height: auto; to the image.
.img-responsive 类应用 display: block; 和最大宽度：100%；和高度：自动；到图像。
HTML
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
CSS
.row.no-pad.img-responsive{
margin-right:0px;
margin-left:0px;
border:none;
}
Cheers!
干杯!
回答by chau
In my version of BootStrap, it was this:
在我的 BootStrap 版本中，是这样的：
img.wp-post-image {
border-radius: 3px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}
set them both to 0, and it worked:
将它们都设置为 0，它起作用了：
img.wp-post-image {
border-radius: 0;
box-shadow: 0;
}
回答by Emre
You can only use the get rid of it ! Holaa
你只能用干掉它！好啦
.img-responsive {
width:100%;
border:none;
}回答by Ali.Ghodrat
Don't Panic :)
不要惊慌:)
Simply copy and paste this to your style.css
只需将其复制并粘贴到您的 style.css
.thumbnail {
display: contents;
}
回答by differentgeneration
In Bootstrap 3.3.6 it can be found in the bootstrap.css file
在 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;
}
