#html #css #twitter-bootstrap
Вопрос:
Я пытаюсь центрировать элемент по вертикали на странице. Это прекрасно работает. Но если я добавлю навигационную панель, элемент будет центрирован вертикально, но со смещением от высоты навигационной панели. Как я могу центрировать контейнер содержимого по вертикали с учетом высоты навигационной панели?
body,html { height: 100%; } <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script> <nav class="navbar navbar-light bg-light"> <span class="navbar-brand h1">Navbar</span> </nav> <div class="container d-flex h-100"> <div class="row align-self-center w-100"> <div class="col-6 mx-auto"> <div class="jumbotron"> <h1 class="display-4 text-truncate">Jumbotron</h1> <p class="lead">This is a simple hero unit.</p> <p class="lead"> <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a> </p> </div> </div> </div> </div> Ответ №1:
Вы можете закрепить навигационную панель сверху, добавив fixed-top к ней класс.
body,html { height: 100%; } <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script> <nav class="navbar navbar-light bg-light fixed-top"> <span class="navbar-brand h1">Navbar</span> </nav> <div class="container d-flex h-100"> <div class="row align-self-center w-100"> <div class="col-6 mx-auto"> <div class="jumbotron"> <h1 class="display-4 text-truncate">Jumbotron</h1> <p class="lead">This is a simple hero unit.</p> <p class="lead"> <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a> </p> </div> </div> </div> </div>