Как сделать так, чтобы загрузочная карта всегда имела одинаковые размеры
Я делаю очень простой проект, чтобы изучить вызовы API на Angular, который отлично работает. Моя проблема связана с дизайном HTML. Я использую bootstrap 5, чтобы сделать дизайн немного дружественным, но, поскольку я мало работал с этой библиотекой, мне все еще трудно правильно использовать ее классы. Мой макет состоит из одной карточки, где я печатаю некоторый текст, который я получаю от вызова API, и кнопку для печати другой шутки. Очень просто. Я уже установил максимальную высоту для карты, и она работает нормально, но моя проблема связана с элементами внутри нее. Строка, которую я печатаю, может иметь разную длину, поэтому она будет перемещать кнопку под ней, что, как мне кажется, не самое лучшее для UI/UX.
Я предоставляю код:
HTML
<div class = "container justify-content-center align-items-center mt-5">
<div class = "row">
<div class = "card justify-content-center align-items-center">
<h1 class = "m-3">{{ actualJoke }}</h1>
<button class = "btn btn-outline-primary btn-lg m-5 px-5" (click) = "getJoke()">Next joke ⏩</button>
</div>
</div>
</div>
CSS
.card {
height: 40vh;
}
Что я хочу сделать, так это сделать так, чтобы кнопка всегда оставалась на одном и том же месте, независимо от размера контейнера выше, но я действительно не знаю, возможно ли это.
@MikePoole Ха-ха, я собирался прокомментировать то же самое
Да, это не работает, это просто помещает кнопку посередине всего.
Основываясь на именах классов, я предполагаю, что карта имеет стиль «display: flex». Если это так, вы можете попробовать стилизовать кнопку с помощью «margin-top: auto !important» и посмотреть, что произойдет. Затем он должен прилипнуть к нижней части карты.
Ответы 2
<div class = "container">
<div class = "row">
<div class = "col">
<div class = "card h-100">
<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>
</div>
</div>
</div>
<div class = "col">
<div class = "card h-100">
<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. Some more quick example text for the card's content.</p>
</div>
</div>
</div>
<div class = "col">
<div class = "card h-100">
<div class = "card-body">
<h5 class = "card-title">Card title</h5>
<p class = "card-text">Some quick example text to make up the bulk of the card's content.</p>
</div>
</div>
</div>
</div>
</div>
попробуйте этот код.
<div class = "container">
<div class = "row">
<div class = "col">
<div class = "card h-100">
<div class = "align-items-start card-body d-flex flex-column">
<h5 class = "card-title">Card title</h5>
<p class = "card-text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cumque, pariatur!
</p>
<button class = "btn btn-outline-primary btn-lg m-5 px-5 mt-auto" (click) = "getJoke()">Next joke
⏩</button>
</div>
</div>
</div>
<div class = "col">
<div class = "card h-100">
<div class = "align-items-start card-body d-flex flex-column">
<h5 class = "card-title">Card title</h5>
<p class = "card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi a in
suscipit, aliquam magnam iure, hic earum autem quasi cum deserunt quidem eos quaerat
voluptatum.</p>
<button class = "btn btn-outline-primary btn-lg m-5 px-5 mt-auto" (click) = "getJoke()">Next joke
⏩</button>
</div>
</div>
</div>
<div class = "col">
<div class = "card h-100">
<div class = "align-items-start card-body d-flex flex-column">
<h5 class = "card-title">Card title</h5>
<p class = "card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus,
laudantium!</p>
<button class = "btn btn-outline-primary btn-lg m-5 px-5 mt-auto" (click) = "getJoke()">Next joke
⏩</button>
</div>
</div>
</div>
</div>
</div>
если вы хотите, чтобы все кнопки имели одинаковые размеры, тогда этот код будет полезен, попробуйте это.
Вы можете использовать
position: fixed.