#css #bootstrap-4
Вопрос:
Я новичок в дизайне и начальной загрузке, так что потерпите меня.
Я хочу, чтобы во всех строках было несколько карт одинаковой высоты и ширины (не фиксированных, но отзывчивых), или, другими словами, все карты должны быть такими же высокими и широкими, как самая большая из них . Любое решение приветствуется, не ограничиваясь загрузкой. В примере ниже на больших экранах высота строки и карты становится все больше, а на средних экранах почти каждая строка имеет разную высоту:
<section>
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-6 my-3 d-flex">
<div class="card h-100">
<img class="card-img-top" src="https://via.placeholder.com/340x440/4472c4/FFFFFF" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 my-3 d-flex">
<div class="card h-100">
<img class="card-img-top" src="https://via.placeholder.com/340x440/4472c4/FFFFFF" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 my-3 d-flex">
<div class="card h-100">
<img class="card-img-top" src="https://via.placeholder.com/340x440/4472c4/FFFFFF" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 my-3 d-flex">
<div class="card h-100">
<img class="card-img-top" src="https://via.placeholder.com/340x440/4472c4/FFFFFF" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 my-3 d-flex">
<div class="card h-100">
<img class="card-img-top" src="https://via.placeholder.com/340x440/4472c4/FFFFFF" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 my-3 d-flex">
<div class="card h-100">
<img class="card-img-top" src="https://via.placeholder.com/340x440/4472c4/FFFFFF" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 my-3 d-flex">
<div class="card h-100">
<img class="card-img-top" src="https://via.placeholder.com/340x440/4472c4/FFFFFF" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 my-3 d-flex">
<div class="card h-100">
<img class="card-img-top" src="https://via.placeholder.com/340x440/4472c4/FFFFFF" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 my-3 d-flex">
<div class="card h-100">
<img class="card-img-top" src="https://via.placeholder.com/340x440/4472c4/FFFFFF" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div>
</div>
</section>
Комментарии:
1. Все карты имеют одинаковую высоту. Вы хотите, чтобы метки привязки были выровнены внизу?
2. Могу я тоже получить CSS? Или просто вставьте код сюда.
3. пожалуйста, поделитесь тем, что вы пробовали.
4. карточки не одинаковой высоты, та, что с одним абзацем, короче той, что с 3 абзацами. CSS-это только базовая начальная загрузка <ссылка rel=»таблица стилей» href=»css/bootstrap.css»>, без пользовательского файла CSS. То же, что и скрипты, только основы: <!— Скрипты —> <!— Скрипты —><скрипт src=»js/jquery-3.6.0.js»><скрипт src=»js/jquery-3.6.0.js»></скрипт> </скрипт><!— Загрузочный JS—> <!— Загрузочный JS—><скрипт src=»js/bootstrap.js»><скрипт src=»js/bootstrap.js»></скрипт> Я пробовал: класс=»выравнивание строк по элементам по центру» класс=»выравнивание строк по высоте»
5. Я также пробовал: класс=»колода карт» (это совсем другое, просто не удалось), div с классом=»col-lg-4 col-md-6 d-flex выравнивание-элементы-растяжка», содержащий div с классом=»карта h-100 мб-4″
Ответ №1:
Как насчет добавления style="height: 200px; max-height: 200px; overflow-y: auto;" ко всем дивам класса card-body
Вот код:
<section>
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-6 my-3 d-flex">
<div class="card h-100">
<img class="card-img-top" src="https://via.placeholder.com/340x440/4472c4/FFFFFF" alt="Card image cap">
<div class="card-body" style="height: 200px; max-height: 200px; overflow-y: auto;">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 my-3 d-flex">
<div class="card h-100">
<img class="card-img-top" src="https://via.placeholder.com/340x440/4472c4/FFFFFF" alt="Card image cap">
<div class="card-body" style="height: 200px; max-height: 200px; overflow-y: auto;">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 my-3 d-flex">
<div class="card h-100">
<img class="card-img-top" src="https://via.placeholder.com/340x440/4472c4/FFFFFF" alt="Card image cap">
<div class="card-body" style="height: 200px; max-height: 200px; overflow-y: auto;">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 my-3 d-flex">
<div class="card h-100">
<img class="card-img-top" src="https://via.placeholder.com/340x440/4472c4/FFFFFF" alt="Card image cap">
<div class="card-body" style="height: 200px; max-height: 200px; overflow-y: auto;">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 my-3 d-flex">
<div class="card h-100">
<img class="card-img-top" src="https://via.placeholder.com/340x440/4472c4/FFFFFF" alt="Card image cap">
<div class="card-body" style="height: 200px; max-height: 200px; overflow-y: auto;">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 my-3 d-flex">
<div class="card h-100">
<img class="card-img-top" src="https://via.placeholder.com/340x440/4472c4/FFFFFF" alt="Card image cap">
<div class="card-body" style="height: 200px; max-height: 200px; overflow-y: auto;">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 my-3 d-flex">
<div class="card h-100">
<img class="card-img-top" src="https://via.placeholder.com/340x440/4472c4/FFFFFF" alt="Card image cap">
<div class="card-body" style="height: 200px; max-height: 200px; overflow-y: auto;">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 my-3 d-flex">
<div class="card h-100">
<img class="card-img-top" src="https://via.placeholder.com/340x440/4472c4/FFFFFF" alt="Card image cap">
<div class="card-body" style="height: 200px; max-height: 200px; overflow-y: auto;">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 my-3 d-flex">
<div class="card h-100">
<img class="card-img-top" src="https://via.placeholder.com/340x440/4472c4/FFFFFF" alt="Card image cap">
<div class="card-body" style="height: 200px; max-height: 200px; overflow-y: auto;">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div>
</div>
</section>
Это сделает все ряды одинаковой высоты.
Комментарии:
1. Спасибо тебе, Зоха. Мои изображения не все имеют одинаковый размер/высоту, и это изменяет формат карты, также должен работать механизм прокрутки, но я могу установить изображения на фиксированные значения и найти высоту, которая не вызовет прокрутку. Это действительно мне очень помогает. Очень признателен!