Как я могу сделать Bootstrap 4 карт одинаковой высоты?

Question

Я использую Bootstrap 4 alpha 2 и пользуюсь картами. В частности, я работаю с this example, взятым из официальных документов. Как гласит название, как я могу сделать все карты одинаковой высоты?

EDIT: Все, что я могу думать сейчас устанавливает следующее правило 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> 

Answer 1

Bootstrap 4 card-columns использует столбцы CSS3, которые на самом деле не поддерживают равные высоты (кроме заполнения столбцов, которое поддерживается только в Firefox).

Если вы используете режим загрузки Bootstrap 4 flexbox, вы можете использовать card-deck и немного CSS для выравнивания высоты и обертывания каждые 3 столбца.

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

http://codeply.com/go/YFFFWHVoRB

UPDATE: В Bootstrap 4 Flexbox теперь по умолчанию, и каждая карта палуба не будет содержать не более 3-х карт (поля карты были недавно изменены): http://www.codeply.com/go/x91w5Cl6ip

Answer 2

jsfiddle

Просто добавьте высоту вы хотите с помощью CSS, например:

.card{ 
    height: 350px; 
} 

Вы вам придется добавить свой собственный CSS.

Если вы обратитесь к документации, это для Кладки стиля - точка это не все они на ту же высоту.

Answer 3

Я принял несколько иной подход. Использование в Card Deck wrapper

я добавил правило стиля, который ограничивает высоту блока карты:

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

Это даст следующий результат:

Answer 4

Вот как я это сделал:

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> 

Answer 5

Если кому-то интересно, есть 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 
}); 

Answer 6

Вы можете либо поместить классы на «строки» или «столбец» ? Не будет видно на картах (граница), если вы используете его в строке. 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?

Answer 7

Я использую 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-см-12 цв-LG-6" Я сделал карты отзывчивым. С «картой h-100» я установил все карты на высоту своего родительского столбца. В моей системе это работает, но я не профессионал. Так что, надеюсь, я помог кому-то.

Answer 8

завернуть карты внутри

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

или

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

Answer 9

Лучшее решение, Bootstrap 4 имеет все, что вам нужно: ИСПОЛЬЗОВАТЬ .d-флекс и .flex наполнителя класса. Не используйте карточные колоды.

Вот зверь:

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