twitter-bootstrap 引导程序上缩略图类的边框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24008398/
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
Border around thumbnail class on bootstrap
提问by user3622465
I'm using the bootstrap grid to build a team page for my company. I have two columns with thumbnails (a picture, name, and title). I have tried to eliminate the default border around the thumbnails but unsuccessfully. I tried with box-shadow, border-radius, and border all set to none or 0 as I saw in other answers but it has been unsuccessful. Any idea on how to proceed? All my code is on http://jsfiddle.net/2yLS3/2/Any other feedback on my code is more than welcome, I only started coding in html/css three weeks ago :-) Thanks a million!
我正在使用引导网格为我的公司构建团队页面。我有两列带有缩略图（图片、名称和标题）。我试图消除缩略图周围的默认边框，但没有成功。正如我在其他答案中看到的那样，我尝试将 box-shadow、border-radius 和 border 都设置为 none 或 0，但没有成功。关于如何进行的任何想法？我所有的代码都在http://jsfiddle.net/2yLS3/2/非常欢迎对我的代码的任何其他反馈，我三周前才开始在 html/css 中编码:-) 感谢一百万！
Here is the html:
这是html：
<head>
<link rel="stylesheet" href="style-team-main.css">
<link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
<title>Title</title>
<link rel="shortcut icon" href="http://www.echo-laboratories.com/icon.ico">
</head>
<body>
<div class="nav">
<div class="container">
<ul>
<li><a href="http://www.echo-laboratories.com">Home</a>
</li>
<li><a href="http://www.echo-laboratories.com/team">Team</a>
</li>
<li><a href="http://www.echo-laboratories.com/contact">Contact</a>
</li>
</ul>
<ul>
<li>
<img src="http://www.echo-laboratories.com/logo.png" />
</li>
</ul>
</div>
</div>
<div class="title">
<div class="container">
<H1>Meet the Team</H1>
</div>
</div>
<div class="main">
<div class="container">
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-3">
<div class="thumbnail">
<a href="www.echo-laboratories.com/pj"><img src="http://tux.crystalxp.net/png/mimipunk-tux-cartoon-1820.png"/></a>
<div class="caption">
<H3>Name</H3>
<H4>Title</H4>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<a href="www.echo-laboratories.com/elad"><img src="http://tux.crystalxp.net/png/mimipunk-tux-cartoon-1820.png"/></a>
<div class="caption">
<H3>Name</H3>
<H4>Title</H4>
</div>
</div>
</div>
<div class="col-md-3">
</div>
</div>
</div>
</div>
<div class="footer">
<div class="container">
<table>
<tr>
<td><a href="mailto:[email protected]" target="_blank"><img src="http://www.echo-laboratories.com/emailgrey.png"/></a></td>
<td><a href="https://www.facebook.com/EchoLabsInc" target="_blank"><img src="http://www.echo-laboratories.com/facebookgrey.png"/></a></td>
<td><a href="http://www.linkedin.com/company/echolabs" target="_blank"><img src="http://www.echo-laboratories.com/linkedingrey.png"/></a></td>
<td><a href="http://www.twitter.com/pjcobut" target="_blank"><img src="http://www.echo-laboratories.com/twittergrey.png"/></a></td>
<td><a href="https://angel.co/echo-labs" target="_blank"><img src="http://www.echo-laboratories.com/angelistgrey.png"/></a></td>
</tr>
</table>
</div>
</div>
And the CSS:
和 CSS：
.nav a {
color:#818286;
text-decoration:none;
font-size:22px;
font-family:Helvetica, sans-serif;
font-weight:bold;
padding:14px 50px;
float:left;
position:relative;
top-margin:10px;
}
.nav a:hover {
color:#39c388;
text-decoration:none;
}
.nav li {
display:inline;
}
.nav {
background-color:#ffffff;
}
.nav img {
height:15%;
width:15%;
float:right;
position:relative;
margin-top:-25px;
}
.title H1 {
color:#ffffff;
font-size:28px;
font-family:Helvetica, sans-serif;
font-weight:bold;
text-align:center;
line-height:60px;
}
.title {
background-color:#B8B8B8;
height:100px;
}
.body {
background-color:#ffffff;
}
.row thumbnail {
border:0;
box-shadow:0;
border-radius:0;
}
.row img {
position:relative;
height:90%;
width:90%;
margin-top:40px;
margin-left:50%;
margin-right:50%;
}
.row h3 {
color:#39c388;
font-weight:bold;
font-family:Helvetica, sans-serif;
font-size:26px;
position:relative;
margin-top:40px;
text-align:center;
}
.row h4 {
color:#818286;
font-family:Helvetica, sans-serif;
font-size:24px;
position:relative;
margin-top:10px;
text-align:center;
}
.footer {
position:fixed;
left:0px;
bottom:0px;
width:100%;
height:60px;
clear:both;
background-color:#B8B8B8;
}
.footer td img {
width:30px;
height:30px;
}
.footer td {
width:50px;
padding-top:15px;
}
.footer table {
margin:auto;
.nav a {
color:#818286;
text-decoration:none;
font-size:22px;
font-family:Helvetica, sans-serif;
font-weight:bold;
padding:14px 50px;
float:left;
position:relative;
top-margin:10px;
}
.nav a:hover {
color:#39c388;
text-decoration:none;
}
.nav li {
display:inline;
}
.nav {
background-color:#ffffff;
}
.nav img {
height:15%;
width:15%;
float:right;
position:relative;
margin-top:-25px;
}
.title H1 {
color:#ffffff;
font-size:28px;
font-family:Helvetica, sans-serif;
font-weight:bold;
text-align:center;
line-height:60px;
}
.title {
background-color:#B8B8B8;
height:100px;
}
.body {
background-color:#ffffff;
}
.row thumbnail {
border:0;
box-shadow:0;
border-radius:0;
}
.row img {
position:relative;
height:90%;
width:90%;
margin-top:40px;
margin-left:50%;
margin-right:50%;
}
.row h3 {
color:#39c388;
font-weight:bold;
font-family:Helvetica, sans-serif;
font-size:26px;
position:relative;
margin-top:40px;
text-align:center;
}
.row h4 {
color:#818286;
font-family:Helvetica, sans-serif;
font-size:24px;
position:relative;
margin-top:10px;
text-align:center;
}
.footer {
position:fixed;
left:0px;
bottom:0px;
width:100%;
height:60px;
clear:both;
background-color:#B8B8B8;
}
.footer td img {
width:30px;
height:30px;
}
.footer td {
width:50px;
padding-top:15px;
}
.footer table {
margin:auto;
}
回答by Fabian Mebus
Change the CSS selector .row thumbnailto .row .thumbnail
将 CSS 选择器更改.row thumbnail为.row .thumbnail
.row .thumbnail {
border:0;
box-shadow:0;
border-radius:0;
}
Here you are: http://jsfiddle.net/2yLS3/3/
你在这里：http: //jsfiddle.net/2yLS3/3/
