В Bootstrap 5, как вы выравниваете div с нижней частью его div-контейнера?
В приведенном ниже коде Bootstrap 5 есть div с идентификатором «div-in-right-div», который находится внутри div с идентификатором «right-div». «div-in-right-div» выравнивается по верхнему краю «right-div».
Какие изменения нужно сделать, чтобы внутренний div «div-in-right-div» был выровнен по вертикали с нижним краем внешнего div «right-div»?
Я думал, что класс "align-bottom", который я добавил в div с id="right-div" должен сделать трюк, но это не так. Я также добавил класс «align-self-end» в div «div-in-right-div» в дополнение к вышесказанному, и это также не дало того, что я хотел.
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<style>
.custom-header {
max-width: 1200px;
margin: 0 auto;
background-color: yellow;
}
.right-block ul.nav {
display: flex;
align-items: center;
list-style: none;
padding: 0;
}
.right-block ul.nav li {
margin-left: 20px;
}
.right-block ul.nav li a {
text-decoration: none;
display: flex;
align-items: center;
position: relative;
}
.right-block ul.nav li .icon {
font-size: 20px;
margin-right: 5px;
}
/* Mobile-specific styling */
@media (max-width: 767px) {
/* ... Mobile styles ... */
}
/* Large screen specific styling */
@media (min-width: 992px) {
.right-block ul.nav li a::before {
content: "";
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 2px;
background-color: black;
transition: all 0.3s ease;
}
.right-block ul.nav li a:hover::before {
width: 100%;
}
}
</style>
<title>Bootstrap 5 Header Example</title>
</head>
<body>
<header class = "custom-header">
<div class = "container">
<div class = "row">
<div class = "col-md-4">
<div class = "left-block">
<!-- Content for the left block -->
<h3>Left Block</h3>
</div>
</div>
<div class = "col-md-4">
<div class = "central-block text-center">
<!-- Content for the center block -->
<h3>Central Block</h3>
</div>
</div>
<div class = "col-md-4 align-bottom" id = "right-div">
<div class = "right-block align-self-end" id = "div-in-right-div">
<!-- Content for the right block -->
<ul class = "nav justify-content-end">
<li>
<a href = "#">
<i class = "bi bi-house icon"></i>
<span>Add</span>
</a>
</li>
<li>
<a href = "#">
<i class = "bi bi-person icon"></i>
<span>Login</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</header>
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Многие объявления в вашем пользовательском CSS можно применить с помощью соответствующих классов Bootstrap.
—
04.06.2023 00:10
Как сказал TimR, вам следует взглянуть на это: getbootstrap.com/docs/5.3/utilities/flex @j08691 Я только что увидел ваш комментарий. Это именно то, что я ответил.
—
04.06.2023 02:18
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
3
61
3
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 3
Добавьте стиль display: inline-grid; или display: grid; к #right-div.
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<style>
.custom-header {
max-width: 1200px;
margin: 0 auto;
background-color: yellow;
}
.right-block ul.nav {
display: flex;
align-items: center;
list-style: none;
padding: 0;
}
.right-block ul.nav li {
margin-left: 20px;
}
.right-block ul.nav li a {
text-decoration: none;
display: flex;
align-items: center;
position: relative;
}
.right-block ul.nav li .icon {
font-size: 20px;
margin-right: 5px;
}
/* Mobile-specific styling */
@media (max-width: 767px) {
/* ... Mobile styles ... */
}
/* Large screen specific styling */
@media (min-width: 992px) {
.right-block ul.nav li a::before {
content: "";
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 2px;
background-color: black;
transition: all 0.3s ease;
}
.right-block ul.nav li a:hover::before {
width: 100%;
}
}
#right-div{
display: inline-grid;
}
</style>
<title>Bootstrap 5 Header Example</title>
</head>
<body>
<header class = "custom-header">
<div class = "container">
<div class = "row">
<div class = "col-md-4">
<div class = "left-block">
<!-- Content for the left block -->
<h3>Left Block</h3>
</div>
</div>
<div class = "col-md-4">
<div class = "central-block text-center">
<!-- Content for the center block -->
<h3>Central Block</h3>
</div>
</div>
<div class = "col-md-4 align-bottom" id = "right-div">
<div class = "right-block align-self-end" id = "div-in-right-div">
<!-- Content for the right block -->
<ul class = "nav justify-content-end">
<li>
<a href = "#">
<i class = "bi bi-house icon"></i>
<span>Add</span>
</a>
</li>
<li>
<a href = "#">
<i class = "bi bi-person icon"></i>
<span>Login</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</header>
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html><!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<style>
.custom-header {
max-width: 1200px;
margin: 0 auto;
background-color: yellow;
}
.right-block ul.nav {
display: flex;
align-items: center;
list-style: none;
padding: 0;
}
.right-block ul.nav li {
margin-left: 20px;
}
.right-block ul.nav li a {
text-decoration: none;
display: flex;
align-items: center;
position: relative;
}
.right-block ul.nav li .icon {
font-size: 20px;
margin-right: 5px;
}
/* Mobile-specific styling */
@media (max-width: 767px) {
/* ... Mobile styles ... */
}
/* Large screen specific styling */
@media (min-width: 992px) {
.right-block ul.nav li a::before {
content: "";
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 2px;
background-color: black;
transition: all 0.3s ease;
}
.right-block ul.nav li a:hover::before {
width: 100%;
}
}
</style>
<title>Bootstrap 5 Header Example</title>
</head>
<body>
<header class = "custom-header">
<div class = "container">
<div class = "row">
<div class = "col-md-4">
<div class = "left-block">
<!-- Content for the left block -->
<h3>Left Block</h3>
</div>
</div>
<div class = "col-md-4">
<div class = "central-block text-center">
<!-- Content for the center block -->
<h3>Central Block</h3>
</div>
</div>
<div class = "col-md-4 align-bottom" id = "right-div">
<div class = "right-block align-self-end" id = "div-in-right-div">
<!-- Content for the right block -->
<ul class = "nav justify-content-end">
<li>
<a href = "#">
<i class = "bi bi-house icon"></i>
<span>Add</span>
</a>
</li>
<li>
<a href = "#">
<i class = "bi bi-person icon"></i>
<span>Login</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</header>
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Объясните свой ответ, пожалуйста. Не просто выбрасывайте код и ожидайте, что все поймут, что вы сделали.
—
03.06.2023 23:14
@ j08691 Этот ответ даже не работает.
—
03.06.2023 23:32
Ваш ответ может быть улучшен с помощью дополнительной вспомогательной информации. Пожалуйста, отредактируйте , чтобы добавить дополнительные сведения, такие как цитаты или документация, чтобы другие могли подтвердить правильность вашего ответа. Вы можете найти больше информации о том, как писать хорошие ответы в справочном центре.
—
04.06.2023 02:27
Ответ принят как подходящий
Вы можете выровнять #div-in-right-div внизу, добавив классы "d-flex align-items-baseline" в #right-div. Я также добавил «ширина: 100%;» к #div-in-right-div, поэтому он не прилипает к левому из-за гибкости дисплея с помощью бутстрапа.
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<style>
/* new */
#div-in-right-div {
width: 100%;
}
/* new end */
.custom-header {
max-width: 1200px;
margin: 0 auto;
background-color: yellow;
}
.right-block ul.nav {
display: flex;
align-items: center;
list-style: none;
padding: 0;
}
.right-block ul.nav li {
margin-left: 20px;
}
.right-block ul.nav li a {
text-decoration: none;
display: flex;
align-items: center;
position: relative;
}
.right-block ul.nav li .icon {
font-size: 20px;
margin-right: 5px;
}
/* Mobile-specific styling */
@media (max-width: 767px) {
/* ... Mobile styles ... */
}
/* Large screen specific styling */
@media (min-width: 992px) {
.right-block ul.nav li a::before {
content: "";
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 2px;
background-color: black;
transition: all 0.3s ease;
}
.right-block ul.nav li a:hover::before {
width: 100%;
}
}
</style>
<title>Bootstrap 5 Header Example</title>
</head>
<body>
<header class = "custom-header">
<div class = "container">
<div class = "row">
<div class = "col-md-4">
<div class = "left-block">
<!-- Content for the left block -->
<h3>Left Block</h3>
</div>
</div>
<div class = "col-md-4">
<div class = "central-block text-center">
<!-- Content for the center block -->
<h3>Central Block</h3>
</div>
</div>
<div class = "col-md-4 d-flex align-items-baseline" id = "right-div">
<div class = "right-block align-self-end" id = "div-in-right-div">
<!-- Content for the right block -->
<ul class = "nav justify-content-end">
<li>
<a href = "#">
<i class = "bi bi-house icon"></i>
<span>Add</span>
</a>
</li>
<li>
<a href = "#">
<i class = "bi bi-person icon"></i>
<span>Login</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</header>
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Другие вопросы по теме
Как увеличить интерактивную область псевдоэлемента без изменения размера его отображения?
Создание отзывчивого и единообразного макета сетки на чистом CSS для переменного количества изображений, все плитки соответствуют размеру самого большого элемента
Как использовать минимальную высоту, соотношение сторон,... с контейнерными запросами?
Установите начальный размер и запомните последний размер выделений
Возврат данных из базы данных и отображение в календаре
Правило семейства шрифтов: Должен ли я включать пробелы в имена локальных шрифтов?
Прикрепите нижний колонтитул к низу, если фактическая высота страницы больше, чем высота html
Обновлять входные значения только в элементы JS
Как я могу сбросить счетчик на 1 каждый раз, когда мои метки меняются?
Как замедлить панорамирование фона при наведении в CSS
Похожие вопросы
Таблица появляется только на долю секунды при нажатии кнопки
О функции remove (), как я могу удалить только последний элемент?
TypeError: отсутствует 1 обязательный позиционный аргумент, аргумент уже определен
Как увеличить интерактивную область псевдоэлемента без изменения размера его отображения?
Javascript - Как проверить, находится ли курсор в последней строке?
Как использовать минимальную высоту, соотношение сторон,... с контейнерными запросами?
Google.script.run.function() возвращает ноль
Как отобразить переменную Javascript с помощью <h1>
Возврат данных из базы данных и отображение в календаре
Что нужно сделать, чтобы кнопка Bootstrap 5.3.0 Collapsible отображалась на этой простой веб-странице?
d-flex align-items-basline justify-content-endв #right-div — это то, что вы ищете?