web-dev-qa-db-fra.com

grille d'amorçage avec bordure entre les colonnes

Comment puis-je faire une grille de bootstrap avec une ligne et à l'intérieur de 2 colonnes. La première taille de colonne 9 col-md-9 et la deuxième taille 3 col-md-3, quelle que soit la longueur du contenu à l'intérieur des colonnes, la ligne et les colonnes sont identiques et bordent celles-ci. Comment puis-je le faire? Ça devrait ressembler à ça:

 enter image description here

Pas comme ça:

 enter image description here

Voici un jsfiddle

.row > div {
  background: lightgrey;
  border: 1px solid grey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class='row'>
  <div class="col-xs-9">
      <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>  <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>  <br>Hifgdfgsdfg
 
  </div>
  <div class="col-xs-3">Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>
  </div>
</div>

csshtml5css3twitter-bootstrap-3bootstrap-grid
5
user2818430

Une solution universelle serait d'utiliser la flexbox.

Cela permettra à vos colonnes d'avoir toujours la même hauteur.

Voici un violon: https://jsfiddle.net/Gt25L/1280/
(Je suppose que vous devrez ajouter une classe spécifique, car rows et cols sont trop généraux, mais je crois que vous avez compris le point

.row {
  display: flex;
}

.row > div {
  flex: 1;
  background: lightgrey;
  border: 1px solid grey;
}
<div class='row'>
  <div class="col-xs-9">
      <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>  <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>  <br>Hifgdfgsdfg
 
  </div>
  <div class="col-xs-3">Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>
  </div>
</div>

3
Dennis Novac

Un peu ghetto, mais vous pouvez utiliser la couleur d’arrière-plan sur la ligne, pas les colonnes, et ajouter une bordure sur une seule des colonnes (en supposant que vous aurez toujours plus de contenu dans la colonne de gauche).

https://jsfiddle.net/Gt25L/1277/

<div class="container">
<div class='row'>
  <div class="col-xs-9 border">
      <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br> Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>  <br>Hifgdfgsdfg

  </div>
  <div class="col-xs-3">Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>
  </div>
</div>
</div>
.row {
  background: lightgrey;
  border: 1px solid grey;
}

.border {
  border-right: 1px solid black;
}
2
Christopher Messer

Si cela ne vous dérange pas de spécifier la largeur de l'un des éléments, vous pouvez utiliser une marge négative, puis augmenter la largeur du montant de la marge.

.row > div {
  background: lightgrey;
  border: 1px solid grey;
}

.row > div:last-child {
  margin-left: -1px;
  width: calc(25% + 1px);
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class='row'>
    <div class="col-xs-9">
      <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br>
      <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br>
      <br>Hifgdfgsdfg

    </div>
    <div class="col-xs-3">Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg

      <br>
      <br>Hifgdfgsdfg
    </div>
  </div>

0
Michael Coker

Vous pouvez utiliser boostrap4 (flexbox) ou jouer avec box-shadow pour dessiner des bordures et définir l'arrière-plan dans le conteneur parent:

Dessiner des ombres insérées et sortantes les fera se chevaucher afin que vous ne remarquiez pas quelle est la boîte la plus haute.

.row {
  background: lightgrey;
  border-top: 2px solid grey;
  box-shadow: 0 2px grey, inset 2px 0 gray, inset -2px 0 grey;
  overflow: hidden;
}

.row>div {
  box-shadow: 2px 0 grey, inset 2px 0 grey
}


/* demo purpose*/

.row {
  margin: auto!important;
  max-width: 80%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div class='row'>
  <div class="col-xs-9">
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br> <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br> <br>Hifgdfgsdfg

  </div>
  <div class="col-xs-3">Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>
  </div>
</div>
<div class='row'>
  <div class="col-xs-3">Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>
  </div>
  <div class="col-xs-9">
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br> <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br> <br>Hifgdfgsdfg

  </div>
</div>

à propos de bootsrap 4https://v4-alpha.getbootstrap.com/

.row>div {
  background: lightgrey;
  border: 1px solid grey;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class='row'>
    <div class="col-9 col-xs-9">
      <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br> <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br> <br>Hifgdfgsdfg

    </div>
    <div class="col-3 col-xs-3">Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br>
    </div>
  </div>
  <div class='row d-flex'>
    <div class="col-3 col-xs-3">Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br>
    </div>
    <div class="col-9 col-xs-9">
      <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br> <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br> <br>Hifgdfgsdfg

    </div>
  </div>
</div>

0
G-Cyr