ตัวแบ่งแนวตั้งระหว่างสองคอลัมน์ใน bootstrap

Question 1

ฉันใช้ twitter bootstrap และมีแถวที่มีสองคอลัมน์ (span6) ฉันจะสร้างตัวแบ่งแนวตั้งระหว่างทั้งสองช่วงได้อย่างไร

ขอบคุณ Murtaza

Question 2

หากรหัสของคุณมีลักษณะดังนี้:

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

ถ้าอย่างนั้นฉันคิดว่าคุณกำลังใช้ DIVS เพิ่มเติมภายใน DIVS "span6" เพื่อเก็บ / จัดรูปแบบเนื้อหาของคุณ ดังนั้น...

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

ดังนั้นคุณสามารถเพิ่ม CSS บางส่วนในคลาส "mycontent-left" เพื่อสร้างตัวแบ่งของคุณ

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

ขยายข้อมูลโค้ด

Question 4

ใน Bootstrap 4 มีคลาสยูทิลิตี้border-rightที่คุณสามารถใช้ได้

ตัวอย่างเช่นคุณสามารถทำได้:

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

Question 5

นี่เป็นอีกทางเลือกหนึ่งที่ฉันใช้มาระยะหนึ่งแล้ว มันใช้งานได้ดีสำหรับฉันเพราะส่วนใหญ่ฉันต้องการมันแยก 2 cols ด้วยสายตา และยังตอบสนองอีกด้วย ซึ่งหมายความว่าถ้าฉันมีคอลัมน์ติดกันในขนาดหน้าจอขนาดกลางและขนาดใหญ่ฉันจะใช้คลาสcol-md-borderซึ่งจะซ่อนตัวคั่นในขนาดหน้าจอที่เล็กกว่า

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

ใน scss คุณสามารถสร้างคลาสที่จำเป็นทั้งหมดได้จากสิ่งนี้:

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>

มันทำงานอย่างไร:

cols ต้องอยู่ในองค์ประกอบที่ไม่มี cols อื่น ๆ มิฉะนั้นตัวเลือกอาจไม่ทำงานตามที่คาดไว้

.col-md-border:not(:last-child)จับคู่องค์ประกอบทั้งหมดยกเว้นองค์ประกอบสุดท้ายก่อนที่จะปิดและเพิ่มเส้นขอบด้านขวาเข้าไป

.col-md-border + .col-md-borderจับคู่ div ที่สองกับคลาสเดียวกันหากทั้งสองอยู่ติดกันและเพิ่มขอบด้านซ้ายและขอบลบ -1px ระยะขอบติดลบจึงไม่สำคัญอีกต่อไปว่าคอลัมน์ใดมีความสูงมากกว่าและตัวคั่นจะมีความสูงเท่ากับคอลัมน์สูงสุด 1px

มันยังมีปัญหาบางอย่าง ...

เมื่อคุณพยายามทำตัวให้ฉลาด / ขี้เกียจและใช้col-XX-Xคลาสร่วมกับhidden-XX/ visible-XXคลาสภายในองค์ประกอบแถวเดียวกัน
เมื่อคุณมีคอลัมน์จำนวนมากและต้องการพิกเซลที่สมบูรณ์แบบ เนื่องจากจะย้ายคอลัมน์ n-1 1px ไปทางซ้าย

... แต่ในทางกลับกันมันตอบสนองใช้งานได้ดีสำหรับ html แบบธรรมดาและง่ายต่อการสร้างคลาสเหล่านี้สำหรับขนาดหน้าจอ bootstrap ทั้งหมด

Question 6

หากต้องการแก้ไขรูปลักษณ์ที่น่าเกลียดของตัวแบ่งที่สั้นเกินไปเมื่อเนื้อหาของคอลัมน์หนึ่งสูงขึ้นให้เพิ่มเส้นขอบให้กับคอลัมน์ทั้งหมด กำหนดขอบลบให้กับคอลัมน์อื่น ๆ เพื่อชดเชยความแตกต่างของตำแหน่ง

ตัวอย่างเช่นคลาสสามคอลัมน์ของฉัน:

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

และ 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>

ตรวจสอบให้แน่ใจว่าคุณใช้ #ddd หากคุณต้องการสีเดียวกับตัวแบ่งแนวนอนของ Bootstrap

Question 7

หากคุณยังคงมองหาทางออกที่ดีที่สุดในปี 2018 ฉันพบว่าวิธีนี้ทำงานได้อย่างสมบูรณ์แบบหากคุณมีองค์ประกอบหลอกฟรีอย่างน้อยหนึ่งรายการ (:: after หรือ :: before)

คุณต้องเพิ่มคลาสในแถวของคุณดังนี้: <div class="row ตัวแบ่งแนวตั้ง ">

และเพิ่มสิ่งนี้ลงใน 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;
}

แถวใด ๆ ที่มีคลาสนี้จะมีตัวแบ่งแนวตั้งระหว่างคอลัมน์ทั้งหมดที่มี ...

คุณสามารถดูวิธีการทำงานในตัวอย่างนี้

Question 8

หากคุณต้องการตัวแบ่งแนวตั้งระหว่าง 2 คอลัมน์สิ่งที่คุณต้องมีคือเพิ่ม

class="col-6 border-left"

ไปยังหนึ่งในคอลัมน์ของคุณ div-s

แต่

ในโลกของการออกแบบที่ตอบสนองคุณอาจต้องทำให้มันหายไปในบางครั้ง

วิธีแก้คือหาย<hr>+ หาย<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/

ทดสอบบน Bootstrap 4.1

Question 9

ฉันได้ทดสอบแล้ว มันทำงานได้ดี

.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

ด้วยBootstrap 4คุณสามารถใช้เส้นขอบหลีกเลี่ยงการเขียน CSS อื่น ๆ

เส้นขอบด้านซ้าย

และถ้าคุณต้องการช่องว่างระหว่างเนื้อหาและเส้นขอบคุณสามารถใช้ช่องว่างภายใน (ในตัวอย่างนี้ช่องว่างด้านซ้าย 4px)

pl-4

ตัวอย่าง:

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

ขยายข้อมูลโค้ด

Question 11

ต้องเปิดแบบเต็มหน้าเพื่อดูพรมแดน!

เพิ่มส่วนความกว้างของสื่อใน CSS เพื่อให้ไม่มีเส้นขอบที่น่ารังเกียจในด้านที่เหมาะกับอุปกรณ์เคลื่อนที่ หวังว่านี่จะช่วยได้! ซึ่งจะปรับขนาดเป็นความยาวของคอลัมน์ที่ยาวที่สุด ทดสอบกับ. col-md-4 และ. col-md-6 และข้อสันนิษฐานของฉันคือเข้ากันได้กับส่วนที่เหลือ ไม่มีการค้ำประกัน

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>

ขยายข้อมูลโค้ด

Question 12

สมมติว่าคุณมีพื้นที่คอลัมน์นี่คือตัวเลือก ปรับสมดุลคอลัมน์ใหม่ตามสิ่งที่คุณต้องการ

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

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

Question 13

สิ่งที่ฉันทำคือลบรางน้ำระหว่างช่วงที่เกี่ยวข้องจากนั้นวาดเส้นขอบด้านซ้ายสำหรับช่วงซ้ายและเส้นขอบด้านขวาสำหรับช่วงขวาในลักษณะที่เส้นขอบของมันทับซ้อนกันเพื่อให้เป็นเส้นเดียว วิธีนี้เส้นที่มองเห็นจะเป็นเพียงเส้นขอบเส้นหนึ่ง

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>

ลองใช้มันได้ผลสำหรับฉัน

Question 14

ใช้สิ่งนี้รับประกัน 100%: -

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