pembatas vertikal antara dua kolom di bootstrap

88

Saya menggunakan bootstrap twitter, dan memiliki baris yang memiliki dua kolom (span6). Bagaimana cara membuat pembatas vertikal antara kedua bentang.

Terima kasih, Murtaza

html css twitter-bootstrap murtaza52
sumber
Saya membuat versi yang tidak memerlukan elemen tambahan: stackoverflow.com/questions/11815081/…
Ross Angus
apa itu (span6)?
Yevgeniy Afanasyev

Jawaban:

99

Jika kode Anda terlihat seperti ini:

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

Lalu saya akan berasumsi Anda menggunakan DIVS tambahan dalam DIV "span6" untuk menyimpan / menata konten Anda? Begitu...

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

Jadi, Anda cukup menambahkan beberapa CSS ke kelas "mycontent-left" untuk membuat pembagi.

.mycontent-left {
  border-right: 1px dashed #333;
}
Billy Moat
sumber
1
masalah di atas adalah bahwa perbatasan menempel pada konten saya pada rentang pertama. Pada rentang pertama saya memiliki formulir, dan perbatasan memeluk isinya. Bagaimana cara memisahkannya?
murtaza52
Sederhana - tambahkan beberapa padding ke konten-kiri dan konten-kanan DIVS.
Billy Moat
10
Masalahnya akan terjadi jika konten yang kanan <span>lebih tinggi dari yang kiri. Dalam hal ini, garis vertikal akan jelek.
lvarayut
Jika kolom memiliki ketinggian yang berbeda, Anda dapat membuat garis dijalankan sepenuhnya dengan menyetel min-height: 100%; height: 100%;di CSS untuk penampung divdan divs yang berisi setiap kolom.
raul
@raul Saya yakin itu hanya berfungsi jika Anda menggunakan flexbox. Jika Anda menggunakan float pada col-*div, ini tidak akan berhasil.
Jacob Stamm
30 

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

Santirisco
sumber
1
Gunakan pemilih '+' dan Anda tidak memerlukan kelas anak pertama dan terakhir:.row.vertical-divider div[class^="col-"] + div[class^="col-"] { text-align: center; padding-bottom: 100px; margin-bottom: -100px; border-left: 3px solid #0396D1; }
Vasyl
1
Solusi ini adalah yang terbaik
Wai Yan Hein
22

Di Bootstrap 4 ada kelas utilitas border-rightyang dapat Anda gunakan.

Jadi misalnya Anda bisa melakukan:

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

Nah, inilah opsi lain yang telah saya gunakan selama beberapa waktu sekarang. Ini bekerja sangat baik untuk saya karena saya sangat membutuhkannya untuk memisahkan 2 cols secara visual. Dan itu juga responsif. Artinya, jika saya memiliki kolom di samping satu sama lain dalam ukuran layar sedang dan besar, maka saya akan menggunakan kelas col-md-border, yang akan menyembunyikan pemisah pada ukuran layar yang lebih kecil.

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

Dalam scss Anda dapat menghasilkan semua kelas yang dibutuhkan mungkin dari ini:

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>

Bagaimana itu bekerja:

Kolom harus berada di dalam elemen di mana tidak ada kolom lain, jika tidak, penyeleksi mungkin tidak bekerja seperti yang diharapkan.

.col-md-border:not(:last-child)cocok dengan semua kecuali elemen terakhir sebelum .row close dan menambahkan batas kanan padanya.

.col-md-border + .col-md-bordermencocokkan div kedua dengan kelas yang sama jika keduanya bersebelahan dan menambahkan batas kiri dan margin negatif -1px. Margin negatif adalah mengapa tidak masalah lagi kolom mana yang memiliki tinggi lebih besar dan pemisahnya adalah 1px sama tingginya dengan kolom tertinggi.

Itu juga memiliki beberapa masalah ...

  1. Saat Anda mencoba untuk menjadi pintar / malas dan menggunakan col-XX-Xkelas bersama dengan hidden-XX/ visible-XXkelas di dalam elemen baris yang sama.
  2. Ketika Anda memiliki banyak kolom dan membutuhkan piksel yang sempurna. Karena itu memindahkan n-1 kolom 1px ke kiri.

... Tapi di sisi lain itu responsif, bekerja sangat baik untuk html sederhana dan mudah untuk membuat kelas-kelas ini untuk semua ukuran layar bootstrap.

Artur Käpp
sumber
8

Untuk memperbaiki tampilan pembatas yang jelek karena terlalu pendek saat konten satu kolom lebih tinggi, tambahkan batas ke semua kolom. Beri setiap kolom lain margin negatif untuk mengimbangi perbedaan posisi.

Misalnya, tiga kelas kolom saya:

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

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

Pastikan Anda menggunakan #ddd jika Anda ingin warna yang sama dengan pembagi horizontal Bootstrap.

Becca
sumber
Saya suka solusi ini tetapi dirancang hanya untuk tiga kolom atau lebih. Bagaimana jika Anda hanya menginginkan dua? Anda div ".borders" tengah tidak akan ada di sana untuk menyesuaikan margin.
Matthew Zackschewski
6

Jika Anda masih mencari solusi terbaik pada tahun 2018, saya menemukan cara ini berfungsi dengan sempurna jika Anda memiliki setidaknya satu elemen pseudo gratis (:: after atau :: before).

Anda hanya perlu menambahkan kelas ke baris Anda seperti ini: <div class="row pembagi vertikal ">

Dan tambahkan ini ke CSS Anda: 

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

Setiap baris dengan kelas ini sekarang akan memiliki pemisah vertikal antara semua kolom yang dikandungnya ...

Anda dapat melihat cara kerjanya dalam contoh ini.

Pengembang Pisang
sumber
1
Hilangkan - in [class * = 'col-'] (ke [class * = 'col']) untuk kompatibilitas bootstrap 4 dengan kelas "col"
Trey Dibler
hanya komentar "Properti diabaikan karena tampilan. Dengan 'display: inline', properti lebar, tinggi, margin-top, margin-bottom, dan float tidak berpengaruh.css"
Shuja Ahmed
5

Jika Anda menginginkan pembatas vertikal antara 2 kolom, yang Anda butuhkan hanyalah menambahkan 

class="col-6 border-left"

ke salah satu kolom div-s Anda

TAPI

Dalam dunia desain responsif, terkadang Anda mungkin perlu membuatnya menghilang.

Solusinya menghilang <hr>+ menghilang <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/

diuji pada Bootstrap 4.1

Yevgeniy Afanasyev
sumber
4

Saya sudah mengujinya. Ini bekerja dengan baik.

.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
sumber
1
Bekerja, sempurna seperti yang dibutuhkan, juga seharusnya menjelaskan apa yang Anda lakukan.
Atik M.
Benar-benar sempurna, dan sepenuhnya responsif - bahkan ketika kolom ditumpuk di layar yang lebih kecil, batasnya menghilang, seperti yang Anda inginkan! Solusi mudah yang hebat, terima kasih! :)
rmcsharry
1
tidak berfungsi, pemisah kanan masih ada, lihat di sini: jsfiddle.net/k4uavbtz
Yevgeniy Afanasyev
Bekerja untuk 3+ kolom. Jika hanya menggunakan dua kolom, pembatas mengikuti tinggi kolom kiri. Oleh karena itu, jika kolom kanan lebih panjang, batasnya tidak akan cukup tinggi.
Matthew Zackschewski
4

Dengan Bootstrap 4 Anda dapat menggunakan border , menghindari penulisan CSS lain.

pembatas kiri

Dan jika Anda menginginkan ruang antara konten dan batas Anda dapat menggunakan padding . (dalam contoh ini padding tersisa 4px)

pl-4

Contoh: 

    <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>
Luaskan cuplikan

WalterV
sumber
2

Harus Buka di Halaman Penuh untuk Melihat Perbatasan!

Menambahkan klausa lebar media di CSS sehingga tidak ada batas yang tidak nyaman di sisi ramah seluler. Semoga ini membantu! Ini akan mengubah ukuran menjadi panjang kolom terpanjang. Diuji pada .col-md-4 dan .col-md-6 dan asumsi saya kompatibel dengan yang lain. Tidak ada jaminan sekalipun.

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>
Luaskan cuplikan

Matthew Zackschewski
sumber
2

Dengan asumsi Anda memiliki ruang kolom, ini adalah opsi. Seimbangkan kembali kolom tergantung pada apa yang Anda butuhkan.

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

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

Yang saya lakukan adalah menghilangkan selokan di antara bentang masing-masing kemudian menggambar batas kiri untuk bentang kiri dan batas kanan untuk bentang kanan sedemikian rupa sehingga perbatasan mereka tumpang tindih hanya untuk memberikan satu garis. Dengan cara ini garis yang terlihat hanya akan menjadi salah satu pembatas.

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>

Coba ini berhasil untuk saya

flexxxit
sumber
1
Itu jelek jika 2 div tidak memiliki ketinggian yang sama.
Alain Tiemblo
-2

Gunakan ini, dijamin 100%: -

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