Làm thế nào để tạo 4 thẻ Bootstrap có cùng chiều cao trong các cột thẻ?

Tôi đang sử dụng Bootstrap 4 alpha 2 và tận dụng lợi thế trên thẻ. Cụ thể, tôi đang làm việc với ví dụ này được lấy từ các tài liệu chính thức. Làm thế nào tôi có thể làm cho tất cả các thẻ có cùng chiều cao?

Tất cả những gì tôi có thể nghĩ bây giờ là thiết lập quy tắc CSS sau:

.card {
    min-height: 200px;
}

Nhưng đó chỉ là một giải pháp mã hóa cứng sẽ không hoạt động trong trường hợp chung. Mã trong chế độ xem của tôi giống với mã trong tài liệu, tức là:

<div class="card-columns">
  <div class="card">
    <img class="card-img-top" data-src="..." alt="Card image cap">
    <div class="card-block">
      <h4 class="card-title">Card title that wraps to a new line</h4>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
  </div>
  <div class="card card-block">
    <blockquote class="card-blockquote">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer>
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <img class="card-img-top" data-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>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card card-block card-inverse card-primary text-xs-center">
    <blockquote class="card-blockquote">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
      <footer>
        <small>
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card card-block text-xs-center">
    <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>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
  <div class="card">
    <img class="card-img" data-src="..." alt="Card image">
  </div>
  <div class="card card-block text-xs-right">
    <blockquote class="card-blockquote">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer>
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card 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>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
</div>

Bạn có thể đặt các lớp vào "hàng" hoặc "cột"? Sẽ không hiển thị trên thẻ (đường viền) nếu bạn sử dụng nó trên hàng. https://v4-alpha.getbootstrap.com/utilities/flexbox/#align-items

<div class="container">
    <div class="row">
          <div class="col-lg-4 d-flex align-items-stretch">

Một số câu trả lời khác ở đây có vẻ 'lập dị'. Tại sao lại sử dụng chiều cao tối thiểu hoặc thậm chí tệ hơn là chiều cao cố định?

Tôi nghĩ rằng vấn đề này (chiều cao bằng nhau) là một phần lý do dẫn đến việc loại bỏ các div khối nổi?

Tôi đang sử dụng Bootstrap 4 (Beta 2). Trong khi đó, tình hình dường như đã thay đổi. Tôi đã có cùng một vấn đề và tìm thấy một giải pháp dễ dàng. Đây là mã của tôi:

<div class="container-fluid content-row">
    <div class="row">
        <div class="col-sm-12 col-lg-6">
            <div class="card h-100">
                … content card …
            </div>
        </div>
        … all the other cards … 
    </div>
</div>

Với "col-sm-12 col-lg-6", tôi đã làm cho các thẻ đáp ứng. Với "thẻ h-100", tôi đã đặt tất cả các thẻ bằng chiều cao của cột mẹ. Trên hệ thống của tôi, điều này hoạt động, nhưng tôi không phải dân chuyên nghiệp. Vì vậy, hy vọng rằng tôi đã giúp một ai đó.

Giải pháp tốt nhất, Bootstrap 4 có tất cả những gì bạn cần: SỬ DỤNG THE .d-flexvà .flex-fillclass. Đừng sử dụng card-decksvì chúng không phản hồi. Tôi đã sử dụng col-sm, bạn có thể sử dụng .collớp bạn muốn hoặc sử dụng col-lg-xx có nghĩa là số chiều rộng của cột, ví dụ 4 hoặc 3 để xem tốt nhất nếu bài đăng có nhiều thì 3 hoặc 4 trên mỗi cột

Đây là con thú, hãy thử giảm cửa sổ trình duyệt xuống XS để xem nó hoạt động:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i" rel="stylesheet">
<div class="container">
  <div class="row my-4">
    <div class="col">
      <div class="jumbotron">
        <h1>Bootstrap 4 Cards all same height demo</h1>
        <p class="lead">by djibe.</p>
        <span class="text-muted">(thx to BS4)</span>
        <p>Dependencies : standard BS4</p>
        <p>
          Enjoy the magic of flexboxes and leave the useless card-decks.
        </p>
        <div class="container-fluid">
          <div class="row">
            <div class="col-sm d-flex">
              <div class="card card-body flex-fill">
                A small card content.
              </div>
            </div>
            <div class="col-sm d-flex">
              <div class="card card-body flex-fill">
                "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
                in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
              </div>
            </div>
            <div class="col-sm d-flex">
              <div class="card card-body flex-fill">
                Another small card content.
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

Bạn có thể áp dụng lớp h-100, là viết tắt của chiều cao 100%.

CẬP NHẬT: Trong Bootstrap 4 , flexbox bây giờ là mặc định và mỗi card-deckhàng sẽ chứa 3 thẻ. Các thẻ sẽ lấp đầy đến chiều cao đầy đủ.

http://www.codeply.com/go/x91w5Cl6ip

Bootstrap 4 alpha card-columnssử dụng các cột CSS3 không thực sự hỗ trợ chiều cao bằng nhau (ngoại trừ điền vào cột chỉ được hỗ trợ trong Firefox).

Thay vào đó, nếu bạn bật chế độ flexbox Bootstrap 4, bạn có thể sử dụng card-deckvà một chút CSS để cân bằng chiều cao và quấn 3 cột một lần.

@media (min-width:34em) {
    .card-deck > .card
    {
        width: 29%;
        flex-wrap: wrap;
        flex: initial; 
    }
}

http://codeply.com/go/YFFFWHVoRB

Thẻ Bootstrap liên quan
có cùng chiều cao tính bằng Col

Đây là cách tôi đã làm điều đó:

CSS:

.my-flex-card > div > div.card {
    height: calc(100% - 15px);
    margin-bottom: 15px;
}

HTML:

<div class="row my-flex-card">
    <div class="col-lg-3 col-sm-6">
        <div class="card">
            <div class="card-block">
                aaaa
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-sm-6">
        <div class="card">
            <div class="card-block">
                bbbb
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-sm-6">
        <div class="card">
            <div class="card-block">
                cccc
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-sm-6">
        <div class="card">
            <div class="card-block">
                dddd
            </div>
        </div>
    </div>
</div>

bọc các thẻ bên trong

<div class="card-group"></div>

hoặc là

<div class="card-deck"></div>

Tôi đã có một cách tiếp cận hơi khác. Sử dụng trình bao bọc Bộ bài

Tôi đã thêm một quy tắc kiểu giới hạn chiều cao của khối thẻ:

.card .card-block {max-height:300px;overflow:auto;}

Điều này cho kết quả sau:

Bạn có thể sử dụng bộ bài, nó sẽ căn chỉnh tất cả các thẻ ... điều này đến từ trang chính thức của bootstrap 4.

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <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>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

Một cách tiếp cận hữu ích khác là Lưới thẻ :

<div class="row row-cols-1 row-cols-md-2">
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

Cách tối thiểu nhất để đạt được điều này (mà tôi biết) :

• Áp dụng .text-monospacecho tất cả các văn bản trong thẻ.
• Giới hạn tất cả văn bản trong thẻ ở cùng một số ký tự.

CẬP NHẬT

Thêm .text-truncatevào tiêu đề của thẻ và hoặc các văn bản khác. Điều này buộc các văn bản vào một dòng duy nhất. Làm cho các thẻ có cùng chiều cao.

Tôi là một người mới làm việc này vì vậy xin vui lòng bỏ qua nếu tôi thiếu một cái gì đó cùng nhau.

Tôi đã thử nhiều cách ở trên. Nếu bạn đặt chiều cao = 100%, thẻ sẽ luôn mở rộng đến chiều dài lớn nhất của thẻ dài nhất. Vùng chứa sẽ hạn chế tất cả ở cùng một độ dài.

Tôi muốn xem vùng chứa, vì vậy tôi đã sử dụng màu nền để giúp tôi xem những gì đang diễn ra.

<div class="col-lg-3"  style="background-color: rosybrown;">
    <div class="card w-100" Style="height: 100%">
        <div class="card-body">
            <img src="images/beHappy.png" alt="" class="img-fluid rounded-circle w-25 mb-3">
            <h4>CBe Happy</h2>

điều này làm việc tốt cho tôi:

<div class="card card-body " style="height:80% !important">

buộc CSS của chúng tôi trên CSS chung của bootstraps.

Tôi đã gặp vấn đề này, hầu hết mọi người sử dụng jQuery ... Đây là giải pháp của tôi. "Đừng bận tâm, tôi chỉ là người mới bắt đầu trong việc này..."

.cards-collection {
    .card-item { 
        width: 100%;
        margin: 20px 20px;
        padding:0 ;
        .card {
            border-radius: 10px;
                button {
                    border: inherit;
                }
        }
    }
}

     .container-fluid
         .row.cards-collection.justify-content-center
           .card-item.col-lg-3.col-md-4.col-sm-6.col-11
              .card.h-100

Nếu bất kỳ chiều cao của mục thẻ nào chẳng hạn là 400px (dựa trên nội dung của nó), vì mặc định cho flex-align là căng, thì .card-item (con của hàng hoặc lớp tập hợp thẻ) sẽ được kéo dài. làm cho chiều cao của thẻ là 100% cha mẹ sẽ chiếm hết chiều cao này.

Tôi hy vọng tôi đã chính xác. Tôi phải không?

Nếu ai quan tâm, có một plugin jquery có tên: jquery.matchHeight.js

https://github.com/liabru/jquery-match-height

matchHeight làm cho chiều cao của tất cả các phần tử đã chọn chính xác bằng nhau. Nó xử lý nhiều trường hợp cạnh khiến các plugin tương tự bị lỗi.

Đối với một hàng thẻ, tôi sử dụng:

<div class="row match-height">

Sau đó, bật toàn bộ trang web:

$('.row.match-height').each(function() {
   $(this).find('.card').not('.card .card').matchHeight(); // Not .card .card prevents collapsible cards from taking height
});

jsfiddle

Chỉ cần thêm chiều cao bạn muốn bằng CSS, ví dụ:

.card{
    height: 350px;
}

Bạn sẽ phải thêm CSS của riêng mình.

Nếu bạn kiểm tra tài liệu, đây là cho kiểu Masonry - điểm của điều đó là chúng không có cùng chiều cao.