vertikaler Teiler zwischen zwei Spalten im Bootstrap

Ich verwende Twitter Bootstrap und habe eine Zeile mit zwei Spalten (span6). Wie erstelle ich einen vertikalen Teiler zwischen beiden Bereichen?

Danke, Murtaza

Wenn Ihr Code so aussieht:

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

Dann würde ich annehmen, dass Sie zusätzliche DIVS innerhalb der "span6" -DIVS verwenden, um Ihre Inhalte zu speichern / zu gestalten? So...

<div class="row">
  <div class="span6">
    <div class="mycontent-left">
    </div>
  </div>
  <div class="span6">
    <div class="mycontent-right">
    </div>
  </div>
</div>

Sie können also einfach etwas CSS zur Klasse "mycontent-left" hinzufügen, um Ihren Teiler zu erstellen.

.mycontent-left {
  border-right: 1px dashed #333;
}

In Bootstrap 4 gibt es die Dienstprogrammklasse, border-rightdie Sie verwenden können.

So können Sie zum Beispiel Folgendes tun:

<div class="row">
  <div class="col-6 border-right"></div>
  <div class="col-6"></div>
</div>

Nun, hier ist eine weitere Option, die ich seit einiger Zeit verwende. Es funktioniert großartig für mich, da ich es meistens brauche, um 2 Spalten visuell zu trennen. Und es reagiert auch. Das heißt, wenn ich Spalten in mittleren und großen Bildschirmgrößen nebeneinander habe, würde ich die Klasse verwenden col-md-border, die das Trennzeichen bei kleineren Bildschirmgrößen verbirgt.

CSS:

@media (min-width: 992px) {
    .col-md-border:not(:last-child) {
        border-right: 1px solid #d7d7d7;
    }
    .col-md-border + .col-md-border {
        border-left: 1px solid #d7d7d7;
        margin-left: -1px;
    }
}

In scss können Sie wahrscheinlich alle benötigten Klassen daraus generieren:

scss:

@media(min-width: $screen-md-min) {
    .col-md-border {
        &:not(:last-child) {
            border-right: 1px solid #d7d7d7;
        }

        & + .col-md-border {
            border-left: 1px solid #d7d7d7;
            margin-left: -1px;
        }
    }
}

HTML:

<div class="row">
    <div class="col-md-6 col-md-border"></div>
    <div class="col-md-6 col-md-border"></div>
</div>  

Wie es funktioniert:

Die Spalten müssen sich in einem Element befinden, in dem keine anderen Spalten vorhanden sind. Andernfalls funktionieren die Selektoren möglicherweise nicht wie erwartet.

.col-md-border:not(:last-child)Entspricht allen bis auf das letzte Element vor .row close und fügt einen rechten Rand hinzu.

.col-md-border + .col-md-borderStimmt mit dem zweiten Div mit derselben Klasse überein, wenn diese beiden nebeneinander liegen, und fügt den linken Rand und den negativen Rand -1px hinzu. Ein negativer Rand ist der Grund, warum es nicht mehr wichtig ist, welche Spalte eine größere Höhe hat und das Trennzeichen 1px der Höhe der höchsten Spalte entspricht.

Es hat auch einige Probleme ...

1. Wenn Sie versuchen, klug / faul zu sein und col-XX-Xclass zusammen mit hidden-XX/ visible-XXclasses innerhalb desselben Zeilenelements zu verwenden.
2. Wenn Sie viele Spalten haben und eine pixelgenaue Sache benötigen. Da es n-1 Spalte 1px nach links bewegt.

... Aber auf der anderen Seite reagiert es, funktioniert hervorragend für einfaches HTML und es ist einfach, diese Klassen für alle Bootstrap-Bildschirmgrößen zu erstellen.

Fügen Sie allen Spalten Rahmen hinzu, um das hässliche Aussehen eines Teilers zu korrigieren, der zu kurz ist, wenn der Inhalt einer Spalte größer ist. Geben Sie jeder zweiten Spalte einen negativen Rand, um Positionsunterschiede auszugleichen.

Zum Beispiel meine drei Spaltenklassen:

.border-right {
    border-right: 1px solid #ddd;
}
.borders {
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    margin: -1px;
}
.border-left {
    border-left: 1px solid #ddd;
}

Und der HTML:

<div class="col-sm-4 border-right">First</div>
<div class="col-sm-4 borders">Second</div>
<div class="col-sm-4 border-left">Third</div>

Stellen Sie sicher, dass Sie #ddd verwenden, wenn Sie dieselbe Farbe wie die horizontalen Teiler von Bootstrap wünschen.

Wenn Sie 2018 immer noch nach der besten Lösung suchen, habe ich festgestellt, dass dies perfekt funktioniert, wenn Sie mindestens ein freies Pseudoelement haben (:: after oder :: before).

Sie müssen Ihrer Zeile lediglich eine Klasse wie folgt hinzufügen: <div class="row Vertikalteiler ">

Und fügen Sie dies Ihrem CSS hinzu:

.row.vertical-divider [class*='col-']:not(:last-child)::after {
  background: #e0e0e0;
  width: 1px;
  content: "";
  display:block;
  position: absolute;
  top:0;
  bottom: 0;
  right: 0;
  min-height: 70px;
}

Jede Zeile mit dieser Klasse hat jetzt einen vertikalen Teiler zwischen allen darin enthaltenen Spalten ...

Wie das geht, sehen Sie in diesem Beispiel.

Wenn Sie einen vertikalen Teiler zwischen zwei Spalten wünschen, müssen Sie nur hinzufügen

class="col-6 border-left" 

zu einem Ihrer Spalten div-s

ABER

In der Welt des Responsive Design müssen Sie es möglicherweise manchmal verschwinden lassen.

Die Lösung verschwindet <hr>+ verschwindet <div>+margin-left: -1px;

<div class="container">
  <div class="row">
    <div class="col-md-7">
      1 of 2
    </div>
    <div class="border-left d-sm-none d-md-block" style="width: 0px;"></div>
    <div class="col-md-5" style="margin-left: -1px;">
    <hr class="d-sm-block d-md-none">
      2 of 2
    </div>
  </div>
</div>

https://jsfiddle.net/8z1pag7s/

getestet auf Bootstrap 4.1

Ich habe es getestet. Es funktioniert gut.

.row.vdivide [class*='col-']:not(:last-child):after {
      background: #e0e0e0;
      width: 1px;
      content: "";
      display:block;
      position: absolute;
      top:0;
      bottom: 0;
      right: 0;
      min-height: 70px;
    }

    <div class="container">
      <div class="row vdivide">
        <div class="col-sm-3 text-center"><h1>One</h1></div>
        <div class="col-sm-3 text-center"><h1>Two</h1></div>
        <div class="col-sm-3 text-center"><h1>Three</h1></div>
        <div class="col-sm-3 text-center"><h1>Four</h1></div>
      </div>
    </div>

Mit 4 Bootstrap können Sie mit Grenzen , die Vermeidung andere CSS zu schreiben.

Rand links

Und wenn Sie Platz zwischen Inhalt und Rand wünschen, können Sie Polster verwenden . (in diesem Beispiel links 4px auffüllen)

pl-4

Beispiel:

    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>

    <div class="row">
      <div class="offset-6 border-left pl-4">First</div>
      <div class="offset-6 border-left pl-4">Second</div>
    </div>

Muss auf der ganzen Seite geöffnet werden, um Grenzen zu sehen!

Es wurden Klauseln zur Medienbreite im CSS hinzugefügt, damit es auf der mobilfreundlichen Seite keine unangenehmen Grenzen gibt. Hoffe das hilft! Dadurch wird die Größe auf die Länge der längsten Spalte geändert. Getestet auf .col-md-4 und .col-md-6 und ich gehe davon aus, dass es mit dem Rest kompatibel ist. Keine Garantie.

JSFiddle

.row {
  overflow: hidden;
}

.cols {
  padding-bottom: 100%;
  margin-bottom: -100%;
  overflow: hidden;
}

@media(min-width: 992px) {
  .col-md-4:not(:first-child), 
  .col-md-6:not(:first-child) {
    border-left: 1px solid black;
  }
  .col-md-4:not(:last-child),
  .col-md-6:not(:last-child) {
    border-right: 1px solid black;
    margin-right: -1px;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <h1>
    .col-md-6
  </h1>
  <hr>
  <div class="row text-center">
    <div class="col-md-6 cols">
      <p>Enter some text here</p>
    </div>
    <div class="col-md-6 cols">
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
    </div>
  </div>
  <hr>
  <h1>
    .col-md-4
  </h1>
  <div class="row text-center">
    <div class="col-md-4 cols">
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
    </div>
    <div class="col-md-4 cols">
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
    </div>
    <div class="cols col-md-4 cols">
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
    </div>
  </div>
</div>

Angenommen, Sie haben einen Spaltenraum, ist dies eine Option. Stimmen Sie die Spalten je nach Bedarf neu ab.

<div class="col-1">
    <div class="col-6 vhr">
    </div>
</div>

.vhr{
  border-right: 1px solid #333;
  height:100%;
}

Nun, ich habe die Rinne zwischen den jeweiligen Bereichen entfernt und dann einen linken Rand für den linken Bereich und einen rechten Rand für den rechten Bereich so gezeichnet, dass sich ihre Ränder überlappten, um nur eine einzige Linie zu ergeben. Auf diese Weise ist die sichtbare Linie nur eine der Grenzen.

CSS

.leftspan
{
padding-right:20px;
border-right: 1px solid #ccc;
}

.row-fluid .rightspan {
margin-left: -0.138297872340425%;
*margin-left: -0.13191489361702%;
padding-left:20px;
border-left: 1px solid #ccc;
}

.row-fluid .rightspan:first-child {
margin-left: -0.11063829787234%;
*margin-left: -0.104255319148938%;
}

HTML

  <div class="row-fluid" >
      <div class="span8 leftspan" >
      </div>

      <div class="span4 rightspan"  >
      </div>
 </div>

Versuchen Sie dies, es funktioniert für mich

Verwenden Sie dies, 100% garantiert: -

vr {
  margin-left: 20px;
  margin-right: 20px;
  height: 50px;
  border: 0;
  border-left: 1px solid #cccccc;
  display: inline-block;
  vertical-align: bottom;
}