web-dev-qa-db-fra.com

Se débarrasser de la bordure de vignettes Twitter Bootstrap

J'essaie de me débarrasser de la fine bordure grise par défaut dans Twitter Bootstrap.

Je peux cibler les frontières, par exemple si j'utilise:

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

toutes les bordures de vignettes deviennent rouges.

Mais si j'utilise:

.thumbnails > li { border:0; }

il laisse encore les frontières avec une fine ligne grise. Je ne peux pas me débarrasser de ça. J'ai essayé de changer la couleur en blanc (mon fond est blanc, donc ça pourrait être une solution) mais ça ne marche pas.

Comment puis-je me débarrasser de cette fine bordure grise?

twitter-bootstrapborder
12
Jorge

Les bordures de vignettes sont appliquées à l'élément .thumbnail, à l'intérieur du <li>. Quoi qu'il en soit, la fine ligne "extra" dont vous parlez pourrait être le box-shadow appliqué à cette classe.

Donc vous pouvez essayer:

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

J'ai rencontré le même problème, mais je n'ai pas réglé la bordure ni l'ombre de la boîte sur 0. J'ai finalement pu supprimer la bordure en définissant l'arrière-plan de la classe de miniatures sur transparent.

Comme ça:

.thumbnail{
  background: transparent;
}
3
Elliot Tregoning

Dans ma version de BootStrap, c'était:

img.wp-post-image {

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

mettez les deux à 0, et cela a fonctionné:

img.wp-post-image {

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

Si la méthode conseillée par @albertedevigo ne fonctionne pas, alors essayez de changer la classe de 'img-thumbnail' à 'img-responsive' .

La classe .img-responsive applique display: block; et largeur maximale: 100%; et hauteur: auto; à l'image.

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

À votre santé!

0
Vipul Sharma

Vous ne pouvez l'utiliser que pour vous en débarrasser! Holaa

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

Ne paniquez pas :)

Il suffit de copier et coller ceci dans votre style.css 

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

Dans Bootstrap 3.3.6, il se trouve dans le fichier bootstrap.css

.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
differentgeneration