Jumbotron在使用Bootstrap时像缩略图后面的框一样

Question

I'm just starting to work with Bootstrap and I've run into a problem I can't seem to find a proper solution for, without downloading the whole bootstrap system and editing it locally.

I'm just messing around, seeing what I can do and I've lined up some random pictures from my pc in a grid, but theres a solid box behind them. I can't work out a way to get rid of them with CSS.

 .thumbnail { border: 0 none; box-shadow: none; } 

 <div class="middle-section"> <div class="container"> <h2>Just the middle section</h2> <p>Just typing some bullshit to fill in the extra space, just gonna put in some random pictues from my computer</p> <div class="row"> <div class="col-md-4"> <div class="thumbnail"> <img src="mario.png"> </div> <div class="thumbnail"> <img src="businesssloth.png"> </div> </div> <div class="col-md-4"> <div class="thumbnail"> <img src="ohface.jpg"> </div> <div class="thumbnail"> <img src="nerdpug.jpg"> </div> </div> <div class="col-md-4"> <div class="thumbnail"> <img src="5.jpg"> </div> </div> </div> </div> </div> 

Answer 1

Try this

 .thumbnail { border: 0 none !important; box-shadow: none !important; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw==" crossorigin="anonymous"> <div class="middle-section"> <div class="container"> <h2>Just the middle section</h2> <p>Just typing some bullshit to fill in the extra space, just gonna put in some random pictues from my computer</p> <div class="row"> <div class="col-md-4"> <div class="thumbnail"> <img src="https://media.licdn.com/mpr/mpr/shrink_200_200/AAEAAQAAAAAAAALTAAAAJGY1NGY1N2ZhLTNmZmUtNGRmZi1iMDgxLTJjZjdkNjNkYmZlOQ.png"> </div> <div class="thumbnail"> <img src="https://media.licdn.com/mpr/mpr/shrink_200_200/AAEAAQAAAAAAAALTAAAAJGY1NGY1N2ZhLTNmZmUtNGRmZi1iMDgxLTJjZjdkNjNkYmZlOQ.png"> </div> </div> <div class="col-md-4"> <div class="thumbnail"> <img src="https://media.licdn.com/mpr/mpr/shrink_200_200/AAEAAQAAAAAAAALTAAAAJGY1NGY1N2ZhLTNmZmUtNGRmZi1iMDgxLTJjZjdkNjNkYmZlOQ.png"> </div> <div class="thumbnail"> <img src="https://media.licdn.com/mpr/mpr/shrink_200_200/AAEAAQAAAAAAAALTAAAAJGY1NGY1N2ZhLTNmZmUtNGRmZi1iMDgxLTJjZjdkNjNkYmZlOQ.png"> </div> </div> <div class="col-md-4"> <div class="thumbnail"> <img src="https://media.licdn.com/mpr/mpr/shrink_200_200/AAEAAQAAAAAAAALTAAAAJGY1NGY1N2ZhLTNmZmUtNGRmZi1iMDgxLTJjZjdkNjNkYmZlOQ.png"> </div> </div> </div> </div> </div> 

Answer 2

Set border to 0px instead of setting to none

 /* Latest compiled and minified CSS included as External Resource*/ /* Optional theme */ @import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css'); .thumbnail{ border:0px !important; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; box-shadow: none !important; } 

 <div class="middle-section"> <div class="container"> <h2>Just the middle section</h2> <p>Just typing some bullshit to fill in the extra space, just gonna put in some random pictues from my computer</p> <div class="row"> <div class="col-md-4"> <div class="thumbnail"> <img src="mario.png"> </div> <div class="thumbnail"> <img src="businesssloth.png"> </div> </div> <div class="col-md-4"> <div class="thumbnail"> <img src="ohface.jpg"> </div> <div class="thumbnail"> <img src="nerdpug.jpg"> </div> </div> <div class="col-md-4"> <div class="thumbnail"> <img src="5.jpg"> </div> </div> </div> </div> </div>