Подтвердить что ты не робот

Как сделать Bootstrap 4 карты одинаковой высоты в карточных столбцах?

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

EDIT: все, о чем я могу думать, теперь устанавливает следующее правило CSS:

.card {
    min-height: 200px;
}

Но это просто жестко закодированное решение, которое не будет работать в общем случае. Код в моем представлении такой же, как в документах i.e:

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

ОТВЕТЫ

Ответ 1

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

Ответ 2

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

Ответ 3

Лучшее решение, Bootstrap 4 имеет все, что вам нужно: ИСПОЛЬЗУЙТЕ .d-flex и .flex-fill. Не используйте card-decks как они не реагируют. Я использовал col-sm, вы можете использовать класс .col вы хотите.

Вот зверь, попробуйте уменьшить окно браузера до 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>

Ответ 4

ОБНОВЛЕНИЕ: В Bootstrap 4, flexbox теперь по умолчанию, и каждая строка card-deck будет содержать 3 карты. Карты будут заполняться до полной высоты.

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

Букстрап 4 альфа- card-columns используют 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

связанные с
Загрузочная карта с одинаковой высотой в полку

Ответ 5

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

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>

Ответ 6

Я использовал несколько иной подход. Использование Обложка Card Deck

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

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

Это дает следующий результат: введите описание изображения здесь

Ответ 7

оберните карты внутри

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

или

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

Ответ 8

Самый минимальный способ добиться этого (что я знаю):

  • Примените .text-monospace ко всем текстам на карточке.
  • Ограничьте все тексты в карточках одинаковым количеством символов.

ОБНОВИТЬ

Добавьте .text-truncate в название карты и/или другие тексты. Это вынуждает тексты к одной строке. Создание карт одинаковой высоты.

Ответ 9

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

Ответ 10

jsfiddle

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

.card{
    height: 350px;
}

Вам нужно будет добавить свой собственный CSS.

Если вы проверяете документацию, это для стиля Масонство - точка в том, что они не имеют одинаковой высоты.