Я использую Bootstrap 4. Я создал строку с 3 столбцами размером 4 на средних и больших экранах. Содержимое каждой карты может иметь разные размеры, но я все же хочу, чтобы каждая карта имела одинаковую длину.
Я не использую группы карт / колоды, потому что они не реагируют, и я хочу, чтобы карты занимали все 12 рядов на маленьких / xs дисплеях.
Ниже приведен фрагмент кода, который относится к карточкам. У меня также есть проект на Plunker для просмотра в реальном времени: http://plnkr.co/edit/RLQaA6knYi69qc4vLr6j?p=info. Если вы откроете проект на большом дисплее, карты будут не одинакового размера.
Bootstrap 4 говорит, что если ширина не указана, карты по умолчанию растягиваются, чтобы заполнить всю ширину своего контейнера. Я ошибаюсь, предполагая, что он заполняет всю ширину родительского контейнера, в котором содержится карта (то есть в приведенном ниже случае div столбца col-md-4)?
Если я ошибаюсь, как мне сделать так, чтобы 3 карты растягивались горизонтально, чтобы заполнить всю ширину столбца, в котором размещены , а также вертикально, чтобы иметь одинаковый размер? Я пытался добавить flex-column flex-grow, но это только размер по горизонтали, но не по вертикали. Как лучше всего справиться с этим?
Edit:
Я получил это для работы, добавив класс к каждому card div и установив ширину на 100%. Я до сих пор не уверен, что это правильный подход, так как предполагал, что карта сделает это автоматически.