it-roy-ru.com

Как сделать 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>
64
blueSurfer

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

94
Kerry7777

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

82
user3350279

Лучшее решение, 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>
39
djibe

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

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

Bootstrap 4 alpha 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

Связанные
Бутстраповская карта той же высоты в Col

8
Zim

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

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

Вы можете применить класс h-100, который соответствует высоте 100%.

3
bsesic

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

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

или же

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

3
Mujtaba Kably

Я выбрал немного другой подход. Использование Обертка для колоды карт

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

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

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

2
skrile

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

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

Обновление

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

0
doncadavona