web-dev-qa-db-fra.com

Bordures entre les colonnes de Bootstrap Grid ne fonctionne pas

Je crée une page dans bootstrap où j'utilise 4 colonnes à l'intérieur d'une ligne. Le code:

<div class="row text-center">
    <div class="col-md-3"> </div>
    <div class="col-md-3"> </div>
    <div class="col-md-3"> </div>
    <div class="col-md-3"> </div>
</div>

J'ai ajouté une classe à chaque col afin que chacun puisse avoir une bordure.

.cliente {
    margin-top:10px;
    border: #cdcdcd medium solid;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}

Le problème est que les bordures doivent être séparées par la gouttière naturelle de la grille bootstrap et cela ne fonctionne pas.

Pourrais-tu m'aider s'il te plait? Merci.

twitter-bootstrapbordergutter
10
Mauro Barrionuevo

Vous devez utiliser un autre élément de bloc (c'est-à-dire; DIV) à l'intérieur des colonnes car Bootstrap 'col- *' utilise un remplissage pour créer l'espacement ou la "gouttière" entre les colonnes de la grille.

 <div class="row text-center">
      <div class="col-md-3"> 
        <div class="cliente"> 
          ..
        </div>
      </div>
 </div>

Démo: http://www.bootply.com/71ZVOWCFW

21
Zim

Vous pouvez utiliser la propriété outline. NO cliente div est nécessaire.

.row > div {
    margin-top:10px;
    padding: 20px;
    outline: 2px solid #ccc;
    outline-offset: -10px;
    -moz-outline-radius: 10px;
    -webkit-outline-radius: 10px;
 }
7
Carlos Macias

J'ai fait une version qui ne nécessite pas d'éléments supplémentaires, mais qui pourrait souffrir de hauteurs inégales:

Comment puis-je ajouter une ligne entre deux colonnes en utilisant le système de grille Twitter Bootstraps

2
Ross Angus

Pour développer la solution outline, si vous voulez une bordure qui se réduit à la même taille si deux colonnes adjacentes ont toutes deux des bordures, utilisez box-shadow:

box-shadow: -.5px -.5px 0 .5px #ccc, inset -1px -1px 0 0 #ccc;

L'inconvénient de box-shadow versus outline est que box-shadow peut être rendu par n'importe quel navigateur à une position de sous-pixel, tandis que les contours et les bordures s'accrochent au pixel le plus proche. Si un box-shadow se retrouve sur une position de sous-pixel, il apparaîtra doux ou flou. La seule façon d'éviter cela est de vous assurer que vous ne faites rien qui entraînera l'alignement de la colonne sur une position de sous-pixel.

1
Adam Leggett