2013-05-03 15 views
12

Ich versuche, die Standard-Thumbnail dünne graue Grenze in Twitter Bootstrap loszuwerden.Twitter Bootstrap thumbnail border

Ich kann die Grenzen, zum Beispiel Ziel wenn ich verwende:

.thumbnails > li { border:1px solid red; } 

all Vorschau Grenzen auf rot.

Aber wenn ich benutze:

.thumbnails > li { border:0; } 

es immer noch die Grenzen mit einer dünnen grauen Linie verlässt. Ich werde das nicht los. Ich habe versucht, die Farbe zu Weiß zu ändern (mein Hintergrund ist weiß, also könnte es eine Lösung sein), aber es funktioniert nicht.

Wie kann ich diese dünne graue Grenze loswerden?

Antwort

27

Thumbnail-Rahmen werden auf das Element .thumbnail innerhalb der <li> angewendet. Wie auch immer, die "extra" dünne Linie, über die Sie sprechen, könnte die box-shadow sein, die auf diese Klasse angewendet wird.

So können Sie versuchen:

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

In meiner Version von BootStrap, es war dies:

img.wp-post-image { 

    border-radius: 3px; 
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); 
} 

sie beide auf 0, und es funktionierte:

img.wp-post-image { 

    border-radius: 0; 
    box-shadow: 0; 
} 
2

Ich stieß auf das gleiche Problem, aber weder die Grenze noch den Box-Schatten auf 0 zu setzen, funktionierte für mich. Endlich konnte ich den Rahmen entfernen, indem ich den Hintergrund der Thumbnail-Klasse transparent machte.

So:

.thumbnail{ 
    background: transparent; 
} 
0

Wenn die Methode von @albertedevigo geriet nicht funktioniert, dann versuchen, die Klasse zu ändern von 'img-Thumbnail' auf 'img-responsive'.

Die .img-responsive-Klasse wendet display: block an; und maximale Breite: 100%; und Höhe: Auto; zum Bild.

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

 .row.no-pad.img-responsive{ 
     margin-right:0px; 
     margin-left:0px; 
     border:none; 
    } 

Prost!

0

Sie können nur die loswerden! Holaa

.img-responsive { 
 
\t width:100%; 
 
\t border:none; 
 
}