Chiều cao bằng nhau của các cột trong Bootstrap 4

Question

Tôi có một ít DIV không thông thường trong thiết kế này như hình dưới đây. Tôi có thể sử dụng chiều cao và làm điều đó nhưng tôi muốn nó thay đổi động: Ví dụ: nếu DIV có nhiều nội dung hơn và chiều cao thay đổi trong một khối ở bên phải, thì DIV còn tự động điều chỉnh chiều cao của nó . Tôi tự hỏi nếu flex có thể giúp đỡ. Dưới đây là làm thế nào nó sẽ thay đổi thành:

Tôi có HTML này cho đến nay:

<div class="container"> 
    <div class="row row-eq-height"> 
     <div class="col-sm-8 col-8"> 
     <div class="black"> 
      <p>Bar Graph or Line Graph</p> 
     </div> 
     </div> 
     <div class="col-sm-4 col-4"> 
     <div class="red"> 
      <p>numbers</p> 
     </div> 
     <div class="purple"> 
      <p>numbers</p> 
     </div> 
     <div class="green"> 
      <p>numbers</p> 
     </div> 
     <div class="blue"> 
      <p>numbers</p> 
     </div> 
     </div> 
    </div> 
</div> 

và CSS:

p { color: #fff; } 
.black { background-color: black; } 
.green { background-color: green; } 
.red { background-color: red; } 
.blue { background-color: blue; } 
.purple { background-color: purple; } 

JSFiddle Demo

Answer 1

Bạn có thể sử dụng flexbox cho điều này .

Cập nhật

Và một cách khác:

https://jsfiddle.net/persianturtle/ar0m0p3a/5/

.row-eq-height > [class^=col] { 
    display: flex; 
    flex-direction: column; 
} 

.row-eq-height > [class^=col]:last-of-type div { 
    margin: 10px; 
} 

.row-eq-height > [class^=col]:last-of-type div:first-of-type { 
    margin-top: 0; 
} 

.row-eq-height > [class^=col]:last-of-type div:last-of-type { 
    margin-bottom: 0; 
} 

.row-eq-height > [class^=col]:first-of-type .black { 
    flex-grow: 1; 
} 

Cập nhật

Cách tốt hơn với các lớp học cụ thể hơn:

https://jsfiddle.net/persianturtle/ar0m0p3a/3/

.row-eq-height > [class^=col]:first-of-type { 
    display: flex; 
} 

.row-eq-height > [class^=col]:first-of-type .black { 
    flex-grow: 1; 
} 

.blue p { 
    margin: 0; 
} 

cách gốc:

https://jsfiddle.net/persianturtle/ar0m0p3a/1/

[class^=col] { 
    display: flex; 
    flex-direction: column; 
} 

[class^=col] div { 
    flex-grow: 1 
} 

Answer 2

Bạn đang sử dụng Bootstrap 4, phải không? Bootstrap 4 thực hiện flexbox theo mặc định và bạn có thể giải quyết việc này rất dễ dàng khi sử dụng thuần túy lớp bootstrap 4 cung cấp:

<div class="container"> 
    <div class="row"> 
     <div class="col-sm-8 col-8 black"> 
      <p>Bar Graph or Line Graph</p> 
     </div> 
     <div class="col-sm-4 col-4 d-flex align-content-around flex-wrap"> 
     <div class="red"> 
      <p>numbers and more and so on and on and on</p> 
     </div> 
     <div class="purple"> 
      <p>numbers</p> 
     </div> 
     <div class="green"> 
      <p>numbers</p> 
     </div> 
     <div class="blue"> 
      <p class="mb-0">numbers</p> 
     </div> 
     </div> 
    </div> 
</div> 

JS Fiddle liên kết: https://jsfiddle.net/ydjds2ko/

chi tiết:

• Bạn không cần lớp row-eq-height (nó không có trong Bootstrap4 anyway) vì chiều cao bằng nhau là mặc định.

• Div đầu tiên với lớp col-sm-8 có chiều cao phù hợp, nó chỉ không hiển thị với nền đen, vì div bên trong có chiều cao riêng. Tôi vừa loại bỏ div bên trong và thêm lớp black vào col. Nếu bạn cần div bên trong, hãy cho nó lớp (Bootstrap4) h-100 điều chỉnh chiều cao cho phần tử cha.

• div với lớp col-sm-4 get là lớp flex-wrap sắp xếp theo lớp d-flex. Họ đang sắp xếp các div nội dung.Bootstrap doku: https://getbootstrap.com/docs/4.0/utilities/flex/#align-content

  • Thiết lập độ rộng của div bên trong thùng chứa này tại widht của phụ huynh với w-100

• Vì <p> thêm một lề ở phía dưới, div xanh tại các kết thúc không gần giống với div màu đen. Tôi đã thêm lớp "mb-0", đặt lề dưới thành "0" để bạn có thể thấy nó hoạt động.

Điều đó sẽ hoạt động đúng với div bên phải hoặc bên trái là div có thuộc tính chiều cao lớn hơn.

Chỉnh sửa: thêm các lớp để căn chỉnh nội dung.

Answer 3

Đây là phương pháp tiếp cận đơn giản Bootstrap chỉ cho việc này. Bạn không cần bất kỳ CSS bổ sung nào.

https://www.codeply.com/go/J3BHCFT7lF

<div class="container"> 
    <div class="row"> 
     <div class="col-8"> 
     <div class="black h-100"> 
      <p>Bar Graph or Line Graph</p> 
     </div> 
     </div> 
     <div class="col-4 d-flex flex-column"> 
     <div class="red mb-2"> 
      <p>numbers</p> 
     </div> 
     <div class="purple mb-2"> 
      <p>numbers with more lines of content that wrap to the next line</p> 
     </div> 
     <div class="green mb-2"> 
      <p>numbers</p> 
     </div> 
     <div class="blue"> 
      <p>numbers</p> 
     </div> 
     </div> 
    </div> 
</div> 

này sử dụng Bootstrap 4 utility classes để làm cho chiều cao cột điền đúng.