Как уменьшить все элементы HTML при изменении размера окна браузера

Question

У меня есть следующий HTML-код:

<div id="sectionOne" class="container-fluid d-flex flex-column justify-content-center align-items-center" style="height: 80vh;">
  <div class="row d-flex justify-content-center" style="color: #0069d9">
    <h1 >Section One</h1>
  </div>
  <div class="row section-one-row d-flex justify-content-around">
    <div class="col-lg-4 text-center">
        <div style="padding: 40px">
        <div class="card-item" style="padding: 40px;">
            <h3>Card A</h3>
            <h5>
                Some text here. Some text here. Some text here
            </h5>
        </div>
      </div>
    </div>
    <div class="col-lg-4 text-center">
        <div style="padding: 40px">
        <div class="card-item" style="padding: 40px;">
            <h3>Card B</h3>
            <h5>
                Some text here. Some text here. Some text here
            </h5>
        </div>
      </div>
    </div>
    <div class="col-lg-4 text-center">
        <div style="padding: 40px">
        <div class="card-item" style="padding: 40px;">
            <h3>Card C</h3>
            <h5>
              Some text here. Some text here. Some text here
            </h5>
        </div>
      </div>
    </div>
  </div> 
  <div class="row section-one-row d-flex justify-content-around">
    <div class="col-12 d-flex justify-content-center">
      <button id="caption-button" class="btn btn-primary">Get Started!</button>
    </div>
  </div>
</div>

, который выглядит следующим образом

Однако при изменении размера окна браузера элементы в разделевыглядеть неуместным. Как я могу предотвратить это? Или как я могу соответственно изменить размеры всех элементов при изменении размера окна браузера?

Answer 1

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

#sectionOne{
  background: black;
}
#caption-button{
  border-radius:25px;
}
body{
  background:white
}
.card-item{
  background:white
}

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

Answer 2

Хорошо, я только что понял это, и я опубликую ответ для дальнейшего использования. На первом компоненте div у меня есть style="height: 80vh;", что делало весь раздел менее гибким и менее чувствительным к изменениям размера окна браузера.

Я удалил style="height: 80vh;, и теперь высота div изменяется соответственно, чтобы соответствовать всем элементам в этом компоненте при изменении размера окна.

Answer 3

попробуйте заменить lg в классе сетки на sm.for ex-col-lg-4 text-center -> col-sm-4 text-center. Для получения дополнительной информации вы можете обратиться к сайту начальной загрузки (https://getbootstrap.com/docs/4.3/layout/grid/) в разделе «Сетка», вы можете найти имена классов в соответствии с размером окна / устройства, на котором вы запускаете свою веб-страницу.