Question

我想删除缠绕在我的图片上的边框，缩略图标签。我尝试添加另一个类“noborder”并在我的.col-md-4.noborder css规则下给它，我给border 0 none和box-shadow 0 none但它不起作用。请帮忙。

.col-md-4.noborder {
    border: 0 none;
    box-shadow: none;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
   <head>
      <title>J2EE</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
      <script
         src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
      <script
         src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
      <script type="text/javascript" src="js/navbarscroll.js"></script>
      <script type="text/javascript" src="assets/js/bootstrap.js"></script>
   </head>
   <body> 
          <div class="container">
         <div classs="row">
            <div class="row">
               <div class="col-md-4 noborder">
                  <div class="thumbnail">
                     <img src="..." alt="...">
                     <div class="caption">
                        <h3 align="center">Thumbnail label</h3>
                        <p align="center">...</p>
                     </div>
                  </div>
               </div>
               <div class="col-md-4 noborder">
                  <div class="thumbnail">
                     <img src="..." alt="...">
                     <div class="caption">
                        <h3 align="center">Thumbnail label</h3>
                        <p align="center">...</p>
                     </div>
                  </div>
               </div>
               <div class="col-md-4 noborder">
                  <div class="thumbnail">
                     <img src="..." alt="...">
                     <div class="caption">
                        <h3 align="center">Thumbnail label</h3>
                        <p align="center">...</p>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </body>
</html>

Answer 1

边框位于缩略图类上。这应该删除它。

.thumbnail {
  border: 0 !important;  
}

Answer 2

边框声明为.thumbnail

.thumbnail {
    display: block;
    padding: 4px;
    margin-bottom: 20px;
    line-height: 1.42857143;
    background-color: #fff;
    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;
}

使用您的自定义CSS覆盖它。

.thumbnail{
  border: none;
}

Answer 3

您可以将noborder类添加到缩略图div

      <div class="col-md-4">
          <div class="thumbnail noborder">
             <img src="..." alt="...">
             <div class="caption">
                <h3 align="center">Thumbnail label</h3>
                <p align="center">...</p>
             </div>
          </div>
       </div>
       <Style>
         .noborder {
         border: 0 !important; 
         }
       </style>

OR

.thumbnail {
 border: 0 !important;  
 }

Answer 4

您的.col-md-4没有设置边框属性。将它设置为无边框将不会执行任何操作，因为它没有边框开始。

要将.thumbnail中的.col-md-4.noborder专门设置为没有边框，您可以参考下面的代码段。

.col-md-4.noborder .thumbnail, .col-md-4.noborder .thumbnail img {
    border: 0 none;
    box-shadow: none;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
   <head>
      <title>J2EE</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
      <script
         src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
      <script
         src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
      <script type="text/javascript" src="js/navbarscroll.js"></script>
      <script type="text/javascript" src="assets/js/bootstrap.js"></script>
   </head>
   <body> 
          <div class="container">
         <div classs="row">
            <div class="row">
               <div class="col-md-4 noborder">
                  <div class="thumbnail">
                     <img src="..." alt="...">
                     <div class="caption">
                        <h3 align="center">Thumbnail label</h3>
                        <p align="center">...</p>
                     </div>
                  </div>
               </div>
               <div class="col-md-4 noborder">
                  <div class="thumbnail">
                     <img src="..." alt="...">
                     <div class="caption">
                        <h3 align="center">Thumbnail label</h3>
                        <p align="center">...</p>
                     </div>
                  </div>
               </div>
               <div class="col-md-4 noborder">
                  <div class="thumbnail">
                     <img src="..." alt="...">
                     <div class="caption">
                        <h3 align="center">Thumbnail label</h3>
                        <p align="center">...</p>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </body>
</html>

删除列边框

4 个答案: