Bootstrap jumbotron полная ширина и высота окна с фоновым изображением

У меня есть загрузочный jumbotron на веб-сайте, и мне было интересно, как бы я сделал его по всей ширине и высоте экрана или, по крайней мере, касался навигационной панели, поскольку между jumbotron и Navbar.

До сих пор у меня есть класс "контейнера" внутри класса "jumbotron", чтобы сделать его полной шириной экрана без закругленных углов, но как бы у меня это получилось, так что это была бы полная ширина и высота окна устройства пока кто-нибудь не прокрутится вниз?

До сих пор это то, что у меня есть:

<div class="jumbotron">
    <div class="container">
    <center><h1>Hello, World!</h1>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ligula mauris, iaculis quis tortor eget, ultricies mollis nisi. 
        </p>
        <a class="btn btn-default" href="#">Button 1</a>
        <!-- <a class="btn btn-info" href="#">Button 2</a> -->
    </center>
    </div>
</div>

Ответ 1

Итак, у нас есть 3 вопроса:

Удалите лишнее пространство под навигационной панелью

Навигационная панель начальной загрузки по умолчанию имеет margin-bottom: 20px, которую вы хотите переопределить следующим образом:

.navbar {
    margin-bottom: 0px;
}

Сделать всю ширину jumbotron

Документация по загрузке говорит:

Чтобы сделать всю ширину jumbotron и без закругленных углов, поместите он вне всех .containers и вместо этого добавляет контейнер.

Итак, в основном:

<div class="jumbotron">
  <div class="container">
    ...
  </div>
</div>

Сделать jumbotron full hight

Я не уверен, насколько это будет вписываться в ваш проект, но вы можете попробовать что-то вроде:

.jumbotron{
    height: 100vh;
}

* Хорошо известно: vh означает viewport height

Ответ 2

Вы можете добиться этого, используя jumbotron только под навигационной панелью. Вы должны использовать jumbotron внутри контейнера или div, а его класс:

<div class="container-full-bg">

Использование "full-bg" увеличит ширину jumbotron для соответствия странице. Чтобы увеличить высоту, я использовал текст внутри класса контейнера или просто использовал теги <br> для увеличения высоты jumbotron соответственно в соответствии с моими потребностями. Образец:

<div class="container-full-bg">  <!--  increased the jumbotron width -->
        <div class="jumbotron ">
            <div class="container">
              <br><br><br>
        <p> Write here <p>
        <br><br><br><br>
         </div>
      </div>
  </div>

Теперь, чтобы правильно отобразить изображение в jumbotron, используйте фоновый размер как обложку, настроив файл css как:

.jumbotron{
background-image: url(show-copy.jpg) ;
background-size: cover; 
height: 100%;
width: 100%;}

Надеюсь, что это поможет:)

Ответ 3

Существует несколько способов добиться того, что вы здесь пытаетесь сделать. Я знаю, что эта нить немного устарела, но....

<div class="jumbotron jumbotron-fluid">

сделает всю ширину jumbotron.