วิธีทำให้ Bootstrap 4 การ์ดมีความสูงเท่ากันในคอลัมน์การ์ด?

ฉันใช้ Bootstrap 4 alpha 2 และใช้ประโยชน์จากการ์ด โดยเฉพาะอย่างยิ่งฉันกำลังทำงานกับตัวอย่างนี้ที่นำมาจากเอกสารอย่างเป็นทางการ ฉันจะทำให้การ์ดทั้งหมดมีความสูงเท่ากันได้อย่างไร?

ตอนนี้ฉันคิดได้ทั้งหมดคือการตั้งค่ากฎ CSS ต่อไปนี้:

.card {
    min-height: 200px;
}

แต่นั่นเป็นเพียงวิธีแก้ปัญหาแบบฮาร์ดโค้ดที่ใช้ไม่ได้กับเคสทั่วไป รหัสในมุมมองของฉันเหมือนกับรหัสในเอกสารคือ:

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

คุณสามารถวางชั้นเรียนไว้ที่ "แถว" หรือ "คอลัมน์"? จะไม่ปรากฏบนการ์ด (เส้นขอบ) หากคุณใช้ในแถว 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">

คำตอบอื่น ๆ บางส่วนที่นี่ดูเหมือน "แปลกประหลาด" ทำไมต้องใช้ความสูงต่ำสุดหรือแย่กว่านั้นคือความสูงคงที่?

ฉันคิดว่าปัญหานี้ (ความสูงเท่ากัน) เป็นส่วนหนึ่งของสาเหตุที่ทำให้เกิดความคืบหน้าจาก div บล็อกลอย?

ฉันใช้ Bootstrap 4 (Beta 2) ขณะเดียวกันสถานการณ์ดูเหมือนจะเปลี่ยนไป ฉันมีปัญหาเดียวกันและพบวิธีแก้ปัญหาที่ง่าย นี่คือรหัสของฉัน:

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

ด้วย "col-sm-12 col-lg-6" ฉันได้ทำให้การ์ดตอบสนอง ด้วย "การ์ด h-100" ฉันตั้งค่าการ์ดทั้งหมดไว้ที่ความสูงของคอลัมน์หลัก ในระบบของฉันใช้งานได้ แต่ฉันไม่ใช่มืออาชีพ หวังว่าฉันจะช่วยใครสักคน

ทางออกที่ดีที่สุด Bootstrap 4 มีทุกสิ่งที่คุณต้องการ: ใช้.d-flexและ.flex-fillคลาส อย่าใช้card-decksเนื่องจากไม่ตอบสนอง ฉันใช้col-smแล้วคุณสามารถใช้.colคลาสที่คุณต้องการหรือใช้col-lg-x x หมายถึงจำนวนคอลัมน์ความกว้างเช่น 4 หรือ 3 เพื่อการดูที่ดีที่สุดหากโพสต์มีจำนวนมากแล้ว 3 หรือ 4 ต่อคอลัมน์

นี่คือสัตว์ร้ายลองลดหน้าต่างเบราว์เซอร์เป็น XS เพื่อดูการทำงาน:

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

คุณสามารถใช้ชั้นเรียนh-100ซึ่งหมายถึงความสูง 100%

UPDATE:ในBootstrap 4ตอนนี้ flexbox เป็นค่าเริ่มต้นและแต่ละcard-deckแถวจะมีการ์ด 3 ใบ ไพ่จะเติมเต็มความสูง

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

Bootstrap 4 alpha card-columnsใช้คอลัมน์ CSS3 ซึ่งไม่รองรับความสูงเท่ากัน (ยกเว้นการเติมคอลัมน์ซึ่งรองรับเฉพาะใน Firefox)

หากคุณเปิดใช้งานโหมด Flexbox Bootstrap 4 แทนคุณสามารถใช้card-deckและ CSS เล็กน้อยเพื่อปรับความสูงให้เท่ากันและตัดทุกๆ 3 คอลัมน์

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

http://codeply.com/go/YFFFWHVoRB

การ์ด Bootstrap ที่เกี่ยวข้องที่
มีความสูงเท่ากันใน Col

นี่คือวิธีที่ฉันทำ:

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>

ห่อการ์ดไว้ด้านใน

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

หรือ

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

ฉันใช้แนวทางที่แตกต่างออกไปเล็กน้อย การใช้กระดาษห่อสำรับไพ่

ฉันเพิ่มกฎสไตล์ที่จำกัดความสูงของบล็อกการ์ด:

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

สิ่งนี้ให้ผลลัพธ์ดังต่อไปนี้:

คุณสามารถใช้สำรับไพ่มันจะจัดเรียงไพ่ทั้งหมด ... ซึ่งมาจากหน้าทางการของ 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>

อีกแนวทางที่มีประโยชน์คือCard Grids :

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

วิธีที่น้อยที่สุดในการบรรลุสิ่งนี้(ที่ฉันรู้) :

• ใช้ .text-monospaceไปกับข้อความทั้งหมดในการ์ด
• จำกัด ข้อความทั้งหมดในการ์ดให้มีจำนวนอักขระเท่ากัน

UPDATE

ใส่.text-truncateชื่อการ์ดและหรือข้อความอื่น ๆ สิ่งนี้บังคับให้ข้อความเป็นบรรทัดเดียว ทำให้ไพ่มีความสูงเท่ากัน

ฉันเป็นมือใหม่ในเรื่องนี้ดังนั้นโปรดให้อภัยหากฉันพลาดบางอย่างไปด้วยกัน

ฉันลองหลายข้อข้างต้น หากคุณตั้งค่าความสูง = 100% การ์ดจะขยายเป็นความยาวสูงสุดของการ์ดที่ยาวที่สุดเสมอ คอนเทนเนอร์จะ จำกัด ความยาวทั้งหมดให้เท่ากัน

ฉันอยากเห็นตู้คอนเทนเนอร์ฉันจึงใช้สีพื้นหลังเพื่อช่วยดูว่าเกิดอะไรขึ้น

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

สิ่งนี้ใช้ได้ดีสำหรับฉัน:

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

บังคับให้ CSS ของเราอยู่เหนือ CSS ทั่วไปของ bootstraps

ฉันเจอปัญหานี้คนส่วนใหญ่ใช้ jQuery ... นี่คือวิธีแก้ปัญหาของฉัน “ ไม่เป็นไรฉันเพิ่งเริ่มต้นในเรื่องนี้ ... ”

.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

หากความสูงของรายการการ์ดใด ๆ เช่น 400px (ขึ้นอยู่กับเนื้อหา) เนื่องจากค่าเริ่มต้นสำหรับการจัดแนวแบบยืดหยุ่นคือการยืดออกดังนั้น. card-item (ระดับลูกของแถวหรือระดับการรวบรวมการ์ด) จะถูกยืดออก การทำให้ความสูงของการ์ดเท่ากับ 100% ของผู้ปกครองจะใช้ความสูงเต็มนี้

ฉันหวังว่าฉันจะถูกต้อง ฉันเหรอ?

หากใครสนใจก็มีปลั๊กอิน jquery ชื่อว่า jquery.matchHeight.js

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

matchHeight ทำให้ความสูงขององค์ประกอบที่เลือกทั้งหมดเท่ากันทุกประการ จัดการกรณีขอบจำนวนมากที่ทำให้ปลั๊กอินที่คล้ายกันล้มเหลว

สำหรับแถวของการ์ดฉันใช้:

<div class="row match-height">

จากนั้นเปิดใช้งานทั่วทั้งไซต์:

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

jsfiddle

เพียงเพิ่มความสูงที่คุณต้องการด้วย CSS ตัวอย่าง:

.card{
    height: 350px;
}

คุณจะต้องเพิ่ม CSS ของคุณเอง

หากคุณตรวจสอบเอกสารนี่มีไว้สำหรับรูปแบบการก่ออิฐ - ประเด็นคือความสูงไม่เท่ากันทั้งหมด