Używam programu ładującego z Twittera i mam wiersz, który ma dwie kolumny (span6). Jak utworzyć pionowy rozdzielacz między obydwoma przęsłami.
Dzięki, Murtaza
Używam programu ładującego z Twittera i mam wiersz, który ma dwie kolumny (span6). Jak utworzyć pionowy rozdzielacz między obydwoma przęsłami.
Dzięki, Murtaza
Odpowiedzi:
Jeśli Twój kod wygląda tak:
<div class="row">
<div class="span6">
</div>
<div class="span6">
</div>
</div>
Więc przypuszczam, że używasz dodatkowych DIVS w ramach DIVS "span6" do przechowywania / stylizowania treści? Więc...
<div class="row">
<div class="span6">
<div class="mycontent-left">
</div>
</div>
<div class="span6">
<div class="mycontent-right">
</div>
</div>
</div>
Możesz więc po prostu dodać trochę CSS do klasy „mycontent-left”, aby utworzyć separator.
.mycontent-left {
border-right: 1px dashed #333;
}
<span>
wyższa niż lewej. W takim przypadku pionowa linia będzie brzydka.
min-height: 100%; height: 100%;
w CSS kontener div
i div
kolumny zawierające każdą kolumnę.
col-*
elementach div, to nie zadziała.
.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>
.row.vertical-divider div[class^="col-"] + div[class^="col-"] { text-align: center; padding-bottom: 100px; margin-bottom: -100px; border-left: 3px solid #0396D1; }
Oto kolejna opcja, której używam od jakiegoś czasu. Działa świetnie dla mnie, ponieważ najbardziej potrzebuję go wizualnie oddzielić 2 kolumny. Jest też responsywny. Co oznacza, że jeśli mam kolumny obok siebie na średnich i dużych rozmiarach ekranu, to użyłbym klasy col-md-border
, która ukryłaby separator na mniejszych rozmiarach ekranu.
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;
}
}
W scss możesz wygenerować wszystkie potrzebne klasy prawdopodobnie z tego:
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>
Jak to działa:
Kolumny muszą znajdować się wewnątrz elementu, w którym nie ma innych kolumn, w przeciwnym razie selektory mogą nie działać zgodnie z oczekiwaniami.
.col-md-border:not(:last-child)
dopasowuje wszystkie elementy oprócz ostatniego przed zamknięciem .row i dodaje do niego prawą krawędź.
.col-md-border + .col-md-border
dopasowuje drugi element div z tą samą klasą, jeśli te dwa elementy są obok siebie, i dodaje lewe obramowanie i ujemny margines -1px. Ujemny margines sprawia, że nie ma już znaczenia, która kolumna ma większą wysokość, a separator będzie miał 1 piksel tej samej wysokości co najwyższa kolumna.
Ma też pewne problemy ...
col-XX-X
class razem z hidden-XX
/ visible-XX
classes wewnątrz tego samego elementu wiersza.... Ale z drugiej strony jest responsywny, działa świetnie dla prostego HTML i łatwo jest stworzyć te klasy dla wszystkich rozmiarów ekranu bootstrap.
Aby naprawić brzydki wygląd separatora, który jest zbyt krótki, gdy zawartość jednej kolumny jest wyższa, dodaj obramowanie do wszystkich kolumn. Daj każdej drugiej kolumnie ujemny margines, aby skompensować różnice pozycji.
Na przykład moje trzy klasy kolumn:
.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;
}
A 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>
Upewnij się, że używasz #ddd, jeśli chcesz mieć ten sam kolor co poziome separatory Bootstrap.
Jeśli nadal szukasz najlepszego rozwiązania w 2018 roku, znalazłem sposób, w jaki działa to idealnie, jeśli masz co najmniej jeden wolny pseudoelement (:: after lub :: before).
Musisz tylko dodać klasę do swojego wiersza w następujący sposób: <div class="row
pionowy separator ">
I dodaj to do swojego 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;
}
Każdy wiersz z tą klasą będzie miał teraz pionowy podział między wszystkimi zawartymi w nim kolumnami ...
Możesz zobaczyć, jak to działa w tym przykładzie.
Jeśli chcesz mieć pionową przegrodę między 2 kolumnami, wystarczy dodać
class="col-6 border-left"
do jednego z twoich kolumn div
ALE
W świecie projektowania responsywnego czasami trzeba sprawić, by zniknął.
Rozwiązanie znika <hr>
+ znika <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/
testowane na Bootstrap 4.1
Przetestowałem to. To działa dobrze.
.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>
Dzięki Bootstrap 4 możesz używać obramowań , unikając pisania innych CSS.
border-left
A jeśli potrzebujesz odstępu między treścią a obramowaniem, możesz użyć dopełnienia . (w tym przykładzie wypełnienie po lewej stronie 4px)
pl-4
Przykład:
<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>
Dodano klauzule szerokości multimediów w CSS, aby nie było żadnych nieprzyjemnych granic po stronie przyjaznej dla urządzeń mobilnych. Mam nadzieję że to pomoże! Spowoduje to zmianę rozmiaru na długość najdłuższej kolumny. Testowane na .col-md-4 i .col-md-6 i zakładam, że jest kompatybilny z resztą. Nie ma jednak gwarancji.
.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>
Zakładając, że masz miejsce na kolumny, jest to opcja. Zrównoważyć kolumny w zależności od potrzeb.
<div class="col-1">
<div class="col-6 vhr">
</div>
</div>
.vhr{
border-right: 1px solid #333;
height:100%;
}
Cóż, co zrobiłem, to usunąłem rynnę między odpowiednimi przęsłami, a następnie narysowałem lewą granicę dla lewego przęsła i prawą granicę dla prawego przęsła w taki sposób, że ich granice zachodziły na siebie, dając tylko jedną linię. W ten sposób widoczna linia będzie tylko jedną z granic.
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>
Spróbuj, to działa dla mnie