Ik gebruik twitter bootstrap en heb een rij met twee kolommen (span6). Hoe maak ik een verticale scheidingslijn tussen beide overspanningen.
Bedankt,
Murtaza
Antwoord 1, autoriteit 100%
Als uw code er zo uitziet:
<div class="row">
<div class="span6">
</div>
<div class="span6">
</div>
</div>
Dan neem ik aan dat u extra DIVS gebruikt binnen de “span6” DIVS voor het bewaren/stylen van uw inhoud? Dus…
<div class="row">
<div class="span6">
<div class="mycontent-left">
</div>
</div>
<div class="span6">
<div class="mycontent-right">
</div>
</div>
</div>
Je kunt dus eenvoudig wat CSS toevoegen aan de klasse “mycontent-left” om je scheidingslijn te maken.
.mycontent-left {
border-right: 1px dashed #333;
}
Antwoord 2, autoriteit 37%
In Bootstrap 4 bevindt zich de hulpprogrammaklasse border-rightdie u kunt gebruiken.
Dus u kunt bijvoorbeeld het volgende doen:
<div class="row">
<div class="col-6 border-right"></div>
<div class="col-6"></div>
</div>
Antwoord 3, autoriteit 29%
.row.vertical-divider {
overflow: hidden;
}
.row.vertical-divider > div[class^="col-"] {
text-align: center;
padding-bottom: 100px;
margin-bottom: -100px;
border-left: 3px solid #F2F7F9;
border-right: 3px solid #F2F7F9;
}
.row.vertical-divider div[class^="col-"]:first-child {
border-left: none;
}
.row.vertical-divider div[class^="col-"]:last-child {
border-right: none;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row vertical-divider" style="margin-top: 30px">
<div class="col-xs-6">Hi there</div>
<div class="col-xs-6">Hi world<br/>hi world</div>
</div>4, Autoriteit 8%
Om de lelijke look van een scheidingsdeler te repareren te kort wanneer de inhoud van één kolom groter is, voegt u grenzen toe aan alle kolommen. Geef elke andere kolom een negatieve marge om te compenseren voor positieverschillen.
Bijvoorbeeld mijn drie kolomklassen:
.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;
}
En de 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>
Zorg ervoor dat je #ddd gebruikt als je dezelfde kleur wilt als de horizontale scheidingslijnen van Bootstrap.
Antwoord 5, autoriteit 8%
Met Bootstrap 4kunt u bordersgebruiken, zodat u geen andere CSS hoeft te schrijven.
rand-links
En als u ruimte wilt tussen inhoud en rand, kunt u opvullinggebruiken. (in dit voorbeeld opvulling links 4px)
pl-4
Voorbeeld:
<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>Antwoord 6, autoriteit 6%
Als je in 2018 nog steeds op zoek bent naar de beste oplossing, heb ik de manier gevonden waarop dit perfect werkt als je ten minste één gratis pseudo-element hebt (::after of ::before).
Je hoeft alleen maar klasse als volgt aan je rij toe te voegen: <div class="rowvertical-divider">
En voeg dit toe aan je CSS:
.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;
}
Elke rij met deze klasse heeft nu een verticale scheidingslijn tussen alle kolommen die deze bevat…
Je kunt zien hoe dit werkt in dit voorbeeld.
Antwoord 7, autoriteit 6%
Als u een verticale scheidingslijn tussen 2 kolommen wilt, hoeft u alleen maar toe te voegen
class="col-6 border-left"
naar een van uw kolom-div-s
MAAR
In de wereld van responsief ontwerp moet je het soms laten verdwijnen.
De oplossing verdwijnt <hr>+ verdwijnt <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/
getest op Bootstrap 4.1
Antwoord 8, autoriteit 4%
Ik heb het getest. Het werkt prima.
.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>
Antwoord 9, autoriteit 2%
Moet op volledige pagina openen om grenzen te zien!
Er zijn mediabreedte-clausules toegevoegd in de CSS, zodat er geen vervelende grenzen zijn aan de mobielvriendelijke kant van de dingen. Ik hoop dat dit helpt! Dit wordt aangepast aan de lengte van de langste kolom. Getest op .col-md-4 en .col-md-6 en ik neem aan dat het compatibel is met de rest. Geen garanties echter.
.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>Antwoord 10, autoriteit 2%
Ervan uitgaande dat je een kolomruimte hebt, is dit een optie. Breng de kolommen opnieuw in evenwicht, afhankelijk van wat u nodig heeft.
<div class="col-1">
<div class="col-6 vhr">
</div>
</div>
.vhr{
border-right: 1px solid #333;
height:100%;
}
Antwoord 11
Nou, wat ik deed, was de goot tussen de respectieve overspanningen verwijderen en vervolgens een linkerrand voor de linkeroverspanning en een rechterrand voor de rechteroverspanning op zo’n manier tekenen dat hun randen elkaar overlappen om een enkele lijn te geven. Op deze manier is de zichtbare lijn slechts een van de randen.
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>
Probeer dit, het werkt voor mij
Antwoord 12
Gebruik dit, 100% gegarandeerd:-
vr {
margin-left: 20px;
margin-right: 20px;
height: 50px;
border: 0;
border-left: 1px solid #cccccc;
display: inline-block;
vertical-align: bottom;
}