Как выровнять заголовок с оберткой в Bootstrap?
Оболочка 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" > < a
|