it-swarm.com.de

Entfernen der Twitter Bootstrap-Miniaturansicht

Ich versuche, die standardmäßige dünne graue Umrandung in Twitter Bootstrap zu entfernen.

Ich kann die Grenzen anvisieren, zum Beispiel wenn ich Folgendes benutze:

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

alle Miniaturansichten werden rot.

Aber wenn ich benutze:

.thumbnails > li { border:0; }

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

Wie kann ich diesen dünnen grauen Rand loswerden?

12
Jorge

Miniaturrahmen werden auf das .thumbnail-Element im <li> angewendet. Die "extra" dünne Linie, über die Sie sprechen, könnte der box-shadow sein, der auf diese Klasse angewendet wird.

So können Sie versuchen:

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

Ich bin auf das gleiche Problem gestoßen, aber weder das Setzen des Rahmens noch der Box-Schatten auf 0 hat für mich funktioniert. Ich konnte den Rand schließlich entfernen, indem ich den Hintergrund der Thumbnail-Klasse auf transparent stellte.

So was:

.thumbnail{
  background: transparent;
}
3

In meiner Version von BootStrap war dies so:

img.wp-post-image {

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

setze beide auf 0 und es hat funktioniert:

img.wp-post-image {

    border-radius: 0;
    box-shadow: 0;
}
1
chau

Wenn die von @albertedevigo empfohlene Methode nicht funktioniert, versuchen Sie ändern Sie die Klasse von 'img-thumbnail' in 'img-responsive' .

Die .img-responsive Klasse gilt für Folgendes: display: block; 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
Vipul Sharma

Sie können nur das loswerden! Holaa

.img-responsive {
        width:100%;
        border:none;
}
0
Emre

Keine Panik :)

Kopiere es einfach in deinen style.css

.thumbnail {
    display: contents;
}
0
Ali.Ghodrat

In Bootstrap 3.3.6 ist es in der Datei bootstrap.css zu finden

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