pionowy rozdzielacz między dwiema kolumnami w bootstrapie

Question 1

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

Question 2

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;
}

Question 3

.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>

Rozwiń fragment

Question 4

W Bootstrap 4 jest klasa narzędzi, border-rightktórej możesz użyć.

Na przykład możesz zrobić:

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

Question 5

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-borderdopasowuje 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 ...

Kiedy starasz się być sprytny / leniwy i używać col-XX-Xclass razem z hidden-XX/ visible-XXclasses wewnątrz tego samego elementu wiersza.
Kiedy masz dużo kolumn i potrzebujesz idealnej rzeczy w pikselach. Ponieważ przesuwa n-1 kolumnę o 1 piksel w lewo.

... Ale z drugiej strony jest responsywny, działa świetnie dla prostego HTML i łatwo jest stworzyć te klasy dla wszystkich rozmiarów ekranu bootstrap.

Question 6

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.

Question 7

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.

Question 8

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

Question 9

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>

Question 10

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>

Rozwiń fragment

Question 11

Musi otworzyć się na całej stronie, aby zobaczyć obramowania!

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.

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>

Rozwiń fragment

Question 12

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%;
}

Question 13

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

Question 14

Użyj tego, 100% gwarancji: -

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

Answer 1

86

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

html css twitter-bootstrap murtaza52
źródło

Zrobiłem wersję, która nie wymaga dodatkowych elementów: stackoverflow.com/questions/11815081/ ...

Ross Angus

co to jest (span6)?

Yevgeniy Afanasyev

Answer 2

Zrobiłem wersję, która nie wymaga dodatkowych elementów: stackoverflow.com/questions/11815081/ ...

Ross Angus

Answer 3

co to jest (span6)?

Yevgeniy Afanasyev

Answer 4

97

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;
}

Billy Fosa
źródło

1

Problem z powyższym polega na tym, że obramowanie przylega do mojej zawartości w pierwszym zakresie. W pierwszym przęśle mam formularz, a brzeg otula jego zawartość. Jak mogę to oddzielić?

murtaza52,

Proste - dodaj trochę dopełnienia do DIVS zawartości po lewej i po prawej stronie.

Billy Moat

10

Problem wystąpiłby, gdyby zawartość prawej strony była <span>wyższa niż lewej. W takim przypadku pionowa linia będzie brzydka.

lvarayut

Jeśli kolumny mają różne wysokości, możesz ustawić wiersz w dół, ustawiając min-height: 100%; height: 100%;w CSS kontener divi divkolumny zawierające każdą kolumnę.

raul

@raul Uważam, że działa tylko wtedy, gdy używasz flexbox. Jeśli używasz pływaków na col-*elementach div, to nie zadziała.

Jacob Stamm

Answer 5

1

Problem z powyższym polega na tym, że obramowanie przylega do mojej zawartości w pierwszym zakresie. W pierwszym przęśle mam formularz, a brzeg otula jego zawartość. Jak mogę to oddzielić?

murtaza52,

Answer 6

Proste - dodaj trochę dopełnienia do DIVS zawartości po lewej i po prawej stronie.

Billy Moat

Answer 7

10

Problem wystąpiłby, gdyby zawartość prawej strony była <span>wyższa niż lewej. W takim przypadku pionowa linia będzie brzydka.

lvarayut

Answer 8

Jeśli kolumny mają różne wysokości, możesz ustawić wiersz w dół, ustawiając min-height: 100%; height: 100%;w CSS kontener divi divkolumny zawierające każdą kolumnę.

raul

Answer 9

@raul Uważam, że działa tylko wtedy, gdy używasz flexbox. Jeśli używasz pływaków na col-*elementach div, to nie zadziała.

Jacob Stamm

Answer 10

.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>

Rozwiń fragment

Answer 11

1

Użyj selektora '+' i nie potrzebujesz pierwszej i ostatniej klasy podrzędnej:

.row.vertical-divider div[class^="col-"] + div[class^="col-"] {     text-align: center;     padding-bottom: 100px;     margin-bottom: -100px;      border-left: 3px solid #0396D1;    }

Wasyl

Answer 12

1

To rozwiązanie jest najlepsze

Wai Yan Hein

Answer 13

W Bootstrap 4 jest klasa narzędzi, border-rightktórej możesz użyć.

Na przykład możesz zrobić:

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

Answer 14

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-borderdopasowuje 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 ...

Kiedy starasz się być sprytny / leniwy i używać col-XX-Xclass razem z hidden-XX/ visible-XXclasses wewnątrz tego samego elementu wiersza.
Kiedy masz dużo kolumn i potrzebujesz idealnej rzeczy w pikselach. Ponieważ przesuwa n-1 kolumnę o 1 piksel w lewo.

... Ale z drugiej strony jest responsywny, działa świetnie dla prostego HTML i łatwo jest stworzyć te klasy dla wszystkich rozmiarów ekranu bootstrap.

Answer 15

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.

Answer 16

Podoba mi się to rozwiązanie, ale jest przeznaczone tylko dla trzech lub więcej kolumn. A jeśli chcesz tylko dwóch? Środkowego elementu div „.borders” nie będzie po to, aby dostosować marginesy.

Matthew Zackschewski

Answer 17

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.

Answer 18

1

Pomiń - w [class * = 'col-'] (do [class * = 'col']), aby uzyskać zgodność programu bootstrap 4 z klasą „col”

Trey Dibler

Answer 19

tylko komentarz „Właściwość jest ignorowana ze względu na wyświetlanie. W przypadku właściwości„ display: inline ”właściwości width, height, margin-top, margin-bottom i float nie mają znaczenia.css

Shuja Ahmed

Answer 20

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

Answer 21

4

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>

Chiranjit Ghosh
źródło

1

Działa, zgodnie z oczekiwaniami, również powinien był wyjaśnić, co zrobiłeś.

Atik M.

Absolutnie doskonały iw pełni responsywny - nawet gdy kolumny są ułożone w stosy na mniejszych ekranach, granica znika, tak jak chcesz! Świetne, łatwe rozwiązanie, dziękuję! :)

rmcsharry

1

nie działa, właściwy separator nadal tam jest, zajrzyj tutaj: jsfiddle.net/k4uavbtz

Yevgeniy Afanasyev

Działa dla 3+ kolumn. W przypadku korzystania tylko z dwóch kolumn separator podąża za wysokością lewej kolumny. Dlatego jeśli prawa kolumna jest dłuższa, obramowanie nie będzie wystarczająco wysokie.

Matthew Zackschewski

Answer 22

1

Działa, zgodnie z oczekiwaniami, również powinien był wyjaśnić, co zrobiłeś.

Atik M.

Answer 23

Absolutnie doskonały iw pełni responsywny - nawet gdy kolumny są ułożone w stosy na mniejszych ekranach, granica znika, tak jak chcesz! Świetne, łatwe rozwiązanie, dziękuję! :)

rmcsharry

Answer 24

1

nie działa, właściwy separator nadal tam jest, zajrzyj tutaj: jsfiddle.net/k4uavbtz

Yevgeniy Afanasyev

Answer 25

Działa dla 3+ kolumn. W przypadku korzystania tylko z dwóch kolumn separator podąża za wysokością lewej kolumny. Dlatego jeśli prawa kolumna jest dłuższa, obramowanie nie będzie wystarczająco wysokie.

Matthew Zackschewski

Answer 26

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>

Rozwiń fragment

Answer 27

Musi otworzyć się na całej stronie, aby zobaczyć obramowania!

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.

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>

Rozwiń fragment

Answer 28

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%;
}

Answer 29

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

Answer 30

1

To brzydkie, gdy dwa elementy div nie mają tej samej wysokości.

Alain Tiemblo

Answer 31

Użyj tego, 100% gwarancji: -

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

pionowy rozdzielacz między dwiema kolumnami w bootstrapie

Odpowiedzi:

Musi otworzyć się na całej stronie, aby zobaczyć obramowania!