Как выровнять заголовок с оберткой в Bootstrap?

Опубликовано: 5 Января, 2022

Оболочка HTML позволяет центрировать верхний колонтитул, содержимое и нижний колонтитул внутри веб-страницы. Заголовки могут быть очень красивыми. Креативное использование CSS или начальной загрузки может дать вам боковую панель или две колонки для просмотра активных страниц вашего веб-сайта.

Синтаксис:

 <div class = "wrapper">
    содержание...
</div>

Пример:

HTML

<!DOCTYPE html>
< html lang = "en" >
< head >
< title >
How to align header with
wrapper in Bootstrap?
</ title >
< style type = "text/css" >
.wrapper {
width: 500px;
margin: 0 auto;
}
</ style >
</ head >
< body >
< div class = "wrapper" >
< h1 style = "color: green" >
GeeksforGeeks
</ h1 >
Piece of text inside a 500px
width div centered on the page
</ div >
</ body >
</ html >

Выход:

Как это работает: создайте оболочку и назначьте ей определенную ширину. Примените к нему автоматическое горизонтальное поле, используя свойство margin: auto или margin-left: auto или margin-right: auto. Убедитесь, что ваш контент будет по центру.

Ниже описаны три метода согласования заголовка с оболочкой:

Метод 1. Совместите заголовок с оболочкой в CSS.

HTML

<!DOCTYPE html>
< html lang = "en" >
< head >
< title >
Bootstrap 4 Align Header
with Wrapper
</ title >
< style type = "text/css" >
/* Fit the body to the
edges of the screen */
body {
margin: 0;
padding: 0;
}
nav {
width: 100%;
background: lightgreen;
font-size: 1.1rem !important;
font-weight: bold;
text-transform: uppercase !important;
color: black !important;
font-family: tahoma;
padding: 0;
margin: 0;
}
/* The centered wrapper, all other
content divs will go interior
and this will never surpass the
width of 960px. */
.wrapper {
width: 960px;
max-width: 100%;
margin: 0 auto;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: right;
}
li a {
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
</ style >
</ head >
< body >
< header >
< nav >
< div class = "wrapper" >
< ul >
< li >< a href = "#contact" >
Contact
</ a ></ li >
< li >< a href = "#about" >
About
</ a ></ li >
< li >< a class = "active"
href = "#home" >Home
</ a ></ li >
</ ul >
</ div >
</ nav >
</ header >
< center >
< h1 style = "color: green" >
GeeksforGeeks
</ h1 >
</ center >
</ body >
</ html >


Выход:

Метод 2: выровняйте заголовок с оболочкой в Bootstrap 4.

HTML

<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content=
" width = device -width, initial-scale = 1 ,
shrink-to-fit = no ">
<!-- Bootstrap CSS -->
< link rel = "stylesheet" href =
integrity =
"sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
crossorigin = "anonymous" >
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js,
then Bootstrap JS -->
integrity =
"sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin = "anonymous" >
</ script >
< script src =
integrity =
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin = "anonymous" >
</ script >
< script src =
integrity =
"sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
crossorigin = "anonymous" >
</ script >
< title >
Bootstrap 4 Align Header
with Wrapper
</ title >
< style type = "text/css" >
html,
body {
height: 100%;
margin: 0;
}
.wrapper {
min-height: 100%;
width: 300px;
margin: 0 auto;
margin-bottom: -50px;
}
.push {
height: 50px;
}
.navbar a {
font-size: 1.1rem !important;
font-weight: bold;
text-transform: uppercase !important;
color: black !important;
}
</ style >
</ head >
< body >
< header >
< nav class="navbar navbar-expand-lg
navbar-light bg-light border-top
border-bottom border-dark">
< div class = "wrapper" >
< button class="navbar-toggler
collapsed" type = "button"
data-toggle = "collapse"
data-target = "#navbarSupportedContent"
aria-controls = "navbarSupportedContent"
aria-expanded = "false"
aria-label = "Toggle navigation" >
< span class = "navbar-toggler-icon" ></ span >
</ button >
< div class = "navbar-collapse collapse"
id = "navbarSupportedContent" style = "" >
< ul class = "navbar-nav" >
< li class = "nav-item active" >
< a class = "nav-link" href = "#" >
Home < span class = "sr-only" >
(current)
</ span >
</ a >
</ li >
< li class = "nav-item" >
< a class = "nav-link" href = "#" >
About
</ a >
</ li >
< li class = "nav-item" >
< a class = "nav-link" href = "#" >
Contact
</ a >
</ li >
</ ul >
</ div >
< div class = "push" ></ div >
</ div >
</ nav >
</ header >
< center >
< h1 style = "color: green" >
GeeksforGeeks
</ h1 >
</ center >
</ body >
</ html >


Выход:

Примечание. «Обертка» инкапсулирует все остальные визуальные компоненты на странице. Самый простой способ - иметь часть div «обертку» с шириной вместе с левым и правым автоматическими краями. Отрицательные кромки также можно использовать для горизонтального и вертикального центрирования. Но у него есть свои недостатки, например, если размер окна браузера будет изменен, контент больше не будет виден.

Метод 3: Выровняйте заголовок с гибким боксом в Bootstrap 4. В следующем примере CSS «Flexbox» в области навигации используется для центрирования содержимого.

HTML

<!DOCTYPE html>
< html lang = "en" >
< head >
<!-- Required meta tags -->
< meta charset = "utf-8" >
< meta name = "viewport" content=
" width = device -width,
initial-scale = 1 ,
shrink-to-fit = no ">
<!-- Bootstrap CSS -->
< link rel = "stylesheet" href =
integrity =
"sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
crossorigin = "anonymous" >
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js,
then Bootstrap JS -->
integrity =
"sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin = "anonymous" >
</ script >
< script src =
integrity =
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin = "anonymous" >
</ script >
< script src =
integrity =
"sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
crossorigin = "anonymous" >
</ script >
< title >
Bootstrap 4 Align header
with wrapper
</ title >
< style type = "text/css" >
.navbar {
display: flex;
justify-content: space-between;
}
.navbar-collapse {
flex-grow: 0;
}
.navbar-expand-lg .navbar-collapse {
justify-content: flex-end;
}
.flex-mobile-nav {
display: flex;
justify-content: space-between;
width: 100%;
}
.nav-container-nav {
max-width: 1024px;
margin: 0 auto;
width: 100%;
display: flex;
}
.navbar a {
font-size: 1.1rem !important;
font-weight: bold;
text-transform: uppercase !important;
color: black !important;
}
</ style >
</ head >
< body >
< header >
< nav class="navbar navbar-expand-lg
navbar-light bg-light border-top
border-bottom border-dark">
< div class = "nav-container-nav" >
< div class = "flex-mobile-nav" >
< button class="navbar-toggler
collapsed" type = "button"
data-toggle = "collapse"
data-target = "#navbarSupportedContent"
aria-controls = "navbarSupportedContent"
aria-expanded = "false"
aria-label = "Toggle navigation" >
< span class = "navbar-toggler-icon" ></ span >
</ button >
</ div >
< div class = "navbar-collapse collapse"
id = "navbarSupportedContent" style = "" >
< ul class = "navbar-nav" >
< li class = "nav-item active" >
< a class = "nav-link" href = "#" >
Home < span class = "sr-only" >
(current)
</ span >
</ a >
</ li >
< li class = "nav-item" >
< a class = "nav-link" href = "#" >
About
</ a >
</ li >
< li class = "nav-item" >