web-dev-qa-db-fra.com

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

Disposition de deux colonnes avec une ligne au milieu. 

[                      ] | [                      ]
[                      ] | [                      ]
[                      ] | [                      ]
[     Left Column      ] | [    Right Column      ]
[                      ] | [                      ]
[                      ] | [                      ]
[                      ] | [                      ]
[                      ] | [                      ]
gridtwitter-bootstrap
46
ehabd

Je pense que j'ai bien compris votre question ... c'est le code ci-dessous. Le style en ligne ci-dessous est juste pour illustration. Vous appliquez votre style dans le fichier css.

<div class="container">
    <div class="row-fluid">
        <div class="span6" style="padding-right:20px; border-right: 1px solid #ccc;">
            <p>Some Contents Here...</p>
        </div>

        <div class="span6">
            <p>Some Contents Here...</p>
        </div>
    </div>
</div>

Le code ci-dessus doit afficher cette image .

enter image description here

54
GaryP

Ma solution utilise le pseudo-élément :before pour placer un élément positionné entre les colonnes. Cela ne nécessite plus d'éléments HTML et sera simplement appliqué aux éléments enfants .col-* immédiats de la classe .border-between. Cela devrait être appliqué au même élément que le .row.

HTML

<div class="row border-between">
  <p class="col-sm-6">This column does not have a border, because it's a first child.</p>
  <p class="col-sm-6">This column has a border to the left</p>
</div>

CSS

.border-between > [class*='col-']:before {
   background: #e3e3e3;
   bottom: 0;
   content: " ";
   left: 0;
   position: absolute;
   width: 1px;
   top: 0;
}

.border-between > [class*='col-']:first-child:before {
   display: none;
}
72
Ross Angus

Basé sur la solution @Ross Angus, j'ai trouvé un moyen d'adapter la hauteur. Il suffit de placer les unes sur les autres les bordures de chaque colonne.

.grid--borderBetween > [class*='col-']:before,
.grid--borderBetween > [class*='col-']:after {
    background: #b2b2b2;
    bottom: 0;
    content: " ";
    position: absolute;
    width: 1px;
    top: 0;
}
.grid--borderBetween > [class*='col-']:before {
    left: 0;
}
.grid--borderBetween > [class*='col-']:after {
    right: -1px;
}
.grid--borderBetween > [class*='col-']:first-child:before,
.grid--borderBetween > [class*='col-']:last-child:after {
    display: none;
}
28
Anne Claire

Basé sur cette réponse qui est très similaire: https://stackoverflow.com/a/11299934/1478467

Je suggérerais 2 angles pour attaquer ce problème: les bordures ou les lignes. Voici la démo (jsfiddle) .

Sous un exemple pour l'option arrière-plan, le seul inconvénient est que vous ne contrôlez pas vraiment la largeur de la ligne, sauf si vous utilisez des arrière-plans complexes.

<div class="row myBackground">
        <div class="span6">span6</div>
        <div class="span6">span6</div>
</div>

/* Put here the background (color, images, etc.) that you want between the columns */
.row.myBackground { background: #F00; }
/* This is the column background, for example white as the page background */
.row.myBackground > [class*="span"] { background: blue; }
2
Sherbrow

En développant le CSS fourni par user2136179, vous pouvez également créer des bordures inférieures. Cela nécessite d'utiliser matchHeight mais peut donner à votre grille Bootstrap une apparence de grille. Vérifiez-le

// See the rest on codepen.io
$(".border-bottom").children("div").matchHeight();
1
Carlos Zapata

Bootstrap 4 est maintenant livré avec les utilitaires de bordure . Donc, si vous utilisez Bootstrap 4, vous pouvez simplement utiliser ces classes sur les colonnes qui en ont besoin. Par exemple, si vous souhaitez une bordure entre la colonne A et la colonne B, vous devez ajouter la classe border-right à la colonne A.

Voici une démo:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

<div class="container">
  <div class="row text-center">
    <div class="col border-right">
      Column A
    </div>
    <div class="col">
      Column B
      <br>
      <br>
      <br>
      Additional content demonstrating that the border stretches to accommodate the height of both columns.
    </div>
  </div>
</div>

0
Kodos Johnson

Je pense que vous pouvez définir la colonne de gauche sur 48% de largeur, à droite sur 48% de largeur et le centre div à 2% avec un fond répété. Vous devez vous en occuper

0
Huy trịnh