Bootstrap 4: Как создать центральную вертикальную прокрутку <div>, используя Bootstrap 4 - PullRequest
Новая
       9

Bootstrap 4: Как создать центральную вертикальную прокрутку <div>, используя Bootstrap 4

0 голосов
/ 28 апреля 2020

основываясь на моем вопросе, в основном я хочу сделать свою веб-страницу, как показано ниже:

enter image description here

Красное поле означает, что div, который может прокручиваться и размер div соответствует размеру контента. Между тем основной фон (этот человек) и навигационная панель исправлены и не прокручиваются.

Ниже приведен мой текущий код: 

<body id="header">

<nav class="navbar navbar-expand-lg navbar-light" style="background-color: black;">
  <a class="navbar-brand" style = "font-weight: 600; font-family: Arial, Helvetica, sans-serif;" href="#">Dr. Lim Wee Chai</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarText">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item active">
        <a class="nav-link" style = "font-weight: 600; font-family: Arial;" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" style = "font-weight: 500;" href="#">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" style = "font-weight: 500;" href="#">Philosophies & Values</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" style = "font-weight: 500;" href="#">Lifestyle</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" style = "font-weight: 500;" href="#">Top Glove</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" style = "font-weight: 500;" href="#">Future Vision</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" style = "font-weight: 500;" href="#">Videos</a>
      </li>
    </ul>
  </div>
</nav>

<br>

</body>

Может кто-нибудь помочь мне решить эту проблему?

1 Ответ

0 голосов
/ 28 апреля 2020

В CSS3 свойства flex могут быть полезны для достижения этой цели. Bootstrap 4 широко использует это в flex служебных классах . Чтобы собрать эту настройку, самая простая форма, которую я нашел до сих пор: 

<div class="container d-flex h-100">
    <div class="my-component d-flex mx-auto align-self-center flex-column">
        <!-- some scrollable content -->
    </div>
</div>

Это продемонстрировано в этой скрипке .

Чтобы объяснить все эти Классы давайте разберем это:

  1. Убедитесь, что html, body имеют height: 100%;. Это необходимо для создания тела полной высоты. В свою очередь, браузер теперь может использовать эту высоту для вертикального центрирования контента
  2. .container или .container-fluid с .d-flex, а .h-100 будет использовать эту высоту тела, чтобы также растягиваться по высоте экрана .
  3. .my-component теперь имеет height: 50vh и width: 50vw;, которые имеют высоту и ширину области просмотра и делают этот компонент отзывчивым. Также overflow-y: auto;, чтобы сделать его прокручиваемым. Не стесняйтесь настраивать это по своему вкусу с помощью медиа-запросов и т. Д.
  4. Он также имеет .d-flex для включения .mx-auto (горизонтальный центр), .align-self-center (вертикальный центр) и .flex-column для выравнивания правильно содержимое

Ни один из этих служебных классов не может быть опущен, так как все они работают вместе. Надеюсь, это как вы и просили, поскольку содержание вашей «обертки» не ясно из вопроса.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...