在bootstrap上的缩略图类边框

时间:2014-06-03 06:25:13

标签: css twitter-bootstrap

我正在使用引导网格为我的公司构建一个团队页面。我有两列缩略图(图片,名称和标题)。我试图消除缩略图周围的默认边框,但没有成功。我尝试使用box-shadow,border-radius和border都将其设置为none或0,就像我在其他答案中看到的那样但是它没有成功。 有关如何进行的任何想法?我的所有代码都在http://jsfiddle.net/2yLS3/2/ 关于我的代码的任何其他反馈都非常受欢迎,我只在三周前开始使用html / css编码:-) 万分感谢!

这是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:founders@echo-laboratories.com" 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>

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

1 个答案:

答案 0 :(得分:1)

将CSS选择器.row thumbnail更改为.row .thumbnail

.row .thumbnail {
    border:0;
    box-shadow:0;
    border-radius:0;
}

你在这里:http://jsfiddle.net/2yLS3/3/