Làm cách nào để tôi có thể tạo các cột Bootstrap 4 ở cùng độ cao?

Question

Tuyên bố từ chối trách nhiệm. Câu hỏi này được hỏi many lần trước. Nhưng kể từ thời điểm đã trôi qua và bây giờ chúng tôi đang gần với Bootstrap 4 phát hành với sự hỗ trợ đầy đủ flexbox, đó là thời gian cho câu trả lời mới cho cùng một câu hỏi.

Tôi muốn tạo ra chiều cao cột bình đẳng với Bootstrap 4. Dưới đây là bản demo của kết quả dự kiến:

Tôi muốn có một giải pháp, mà làm việc trong tất cả các trình duyệt, được hỗ trợ bởi Bootstrap 4. Better nếu không có JS tham gia. Một số giải pháp hiện có dựa trên Bootstrap 3, một số giải pháp không hoạt động trong Safari trên MacOS.

Cập nhật. Dường như tôi đã nghiên cứu sai. Bootstrap 4 tàu có chiều cao bằng nhau theo mặc định. Tôi đã bao gồm một hình ảnh cập nhật với hình minh họa. Bạn không cần phải làm gì cả, nó đã ở đó rồi.

Answer 1

Bạn chỉ cần sử dụng class="row-eq-height" với class="row" của bạn để có được cột chiều cao bình đẳng cho các phiên bản bootstrap trước.

nhưng với bootstrap 4 điều này có nguồn gốc.

check this link --http://getbootstrap.com.vn/examples/equal-height-columns/

Answer 2

Cột chiều cao bằng nhau là hành vi mặc định cho các ô Bootstrap 4.

.col { background: red; } 
 
.col:nth-child(odd) { background: yellow; }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col"> 
 
     1 of 3 
 
    </div> 
 
    <div class="col"> 
 
     1 of 3 
 
     <br> 
 
     Line 2 
 
     <br> 
 
     Line 3 
 
    </div> 
 
    <div class="col"> 
 
     1 of 3 
 
    </div> 
 
    </div> 
 
</div>

Answer 3

Bạn có thể sử dụng các thẻ Bootstrap mới:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
 
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 
 

 
<div class="card-group"> 
 
    <div class="card"> 
 
    <img class="card-img-top" src="..." alt="Card image cap"> 
 
    <div class="card-block"> 
 
     <h4 class="card-title">Card title</h4> 
 
     <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> 
 
    </div> 
 
    <div class="card-footer"> 
 
     <small class="text-muted">Last updated 3 mins ago</small> 
 
    </div> 
 
    </div> 
 
    <div class="card"> 
 
    <img class="card-img-top" src="..." alt="Card image cap"> 
 
    <div class="card-block"> 
 
     <h4 class="card-title">Card title</h4> 
 
     <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p> 
 
    </div> 
 
    <div class="card-footer"> 
 
     <small class="text-muted">Last updated 3 mins ago</small> 
 
    </div> 
 
    </div> 
 
    <div class="card"> 
 
    <img class="card-img-top" src="..." alt="Card image cap"> 
 
    <div class="card-block"> 
 
     <h4 class="card-title">Card title</h4> 
 
     <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p> 
 
    </div> 
 
    <div class="card-footer"> 
 
     <small class="text-muted">Last updated 3 mins ago</small> 
 
    </div> 
 
    </div> 
 
</div>

Link: Click here

regards,

Answer 4

Vì nó tự động đặt hàng tầm cao với nội dung động mà không cần css.

Để sử dụng plugin này, bạn chỉ phải gọi phương thức sau đây:

$('.yourelements').equalHeights(); 

Và như vậy bạn có thể ngay cả những mặt hàng vào hộp bạn muốn

docu: https://github.com/mattbanks/jQuery.equalHeights

Ví dụ: https://codepen.io/micahgodbolt/pen/FgqLc