Горизонтальные полосы прокрутки после добавления наложения на фоновое изображение

ProgramBox

Горизонтальные полосы прокрутки после добавления наложения на фоновое изображение

Post author:admin
Запись опубликована:24 декабря, 2022
Post category:Вопросы по программированию

#html #css #twitter-bootstrap #bootstrap-4

#HTML #css #twitter-bootstrap #bootstrap-4

Вопрос:

Я работаю над учебным пособием и создаю раздел «Начало работы», показанный на изображении ниже:

Я замечаю, что как только я добавляю CSS для класса dark-overlay, я начинаю получать эти горизонтальные полосы прокрутки. Я проверил, закомментировав CSS с темным наложением, и полосы прокрутки исчезли.

Вот мой код:

 <section id="home-heading" class="p-5">
    <div class="dark-overlay">
      <div class="row">
        <div class="col">
          <div class="container pt-5">
            <h1>Are You Ready To Get Started?</h1>
            <p class="d-none d-md-block">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Est eaque magni sit dolores. Nisi, dolor nam modi perspiciatis
              consequatur soluta.</p>
          </div>
        </div>
      </div>
    </div>
  </section>

и CSS:

 #home-heading {
  position: relative;
  height: 200px;
  background: url(../img/lights.jpg);
  background-attachment: fixed;
  background-repeat: no-repeat;
  text-align: center;
  color: #fff;
}

.dark-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
}

Если проблема возникает из-за наложения css, почему это так, потому что родительский элемент #home-heading расположен относительно, поэтому класс dark-overlay должен быть расположен относительно родительского элемента?

Может кто-нибудь помочь указать, что происходит?

Спасибо, Сохайб

1. Полосы прокрутки могут возникать, если ваш дочерний элемент превышает ширину / высоту родительского элемента. Можете ли вы попробовать удалить высоту / ширину из вашего класса dark-overlay ?

2. @wahabmemon как это изменит ситуацию? Ширина и высота устанавливаются равными 100% от родительского элемента, который является областью заголовка…

Ответ №1:

Попробуйте удалить строки и столбцы. .row и .col имеют тенденцию добавлять нежелательные отступы.

1. Привет @BitAtWork, спасибо. Похоже, это сработало. Однако в данном конкретном случае классы row и col не были особенно нужны. Что, если нам нужна такая настройка? Как тогда избежать полос прокрутки? Один из способов — установить overflow-x: hidden на теле, но мне это не нравится. Больше похоже на взлом, чем на правильное исправление… Мысли?

2. Если вам действительно нужны строки и столбцы, вам придется удалить ненужные отступы / границы с помощью дополнительного стиля. отсутствие желобов (как вы сами написали) может помочь. Вы также можете использовать overflow-x: hidden в body, а затем вместо этого иметь контейнер с overflow . Но это зависит от того, как вы хотите обрабатывать любые переполнения.

Ответ №2:

Итак, чтобы ответить на мой собственный вопрос, на случай, если кто-нибудь наткнется на такой сценарий в будущем, оказывается, классы bootstrap .col и .row действительно добавляют нежелательное заполнение.

Теперь в сценарии, идентичном тому, который я опубликовал здесь, простым решением будет просто удалить классы row и col из разметки. Если вы ищете что-то другое, может сработать один из следующих подходов:

 #home-heading .row, #home-heading .col{
margin:0;
padding:0;
}

Это явно удаляет поля и отступы из указанных классов

Добавьте no-gutters класс в строку, как в:

 <section id="home-heading" class="p-5">
    <div class="dark-overlay">
      <div class="row no-gutters">
        <div class="col">
          <div class="container pt-5">
            <h1>Are You Ready To Get Started?</h1>
            <p class="d-none d-md-block">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Est eaque magni sit dolores. Nisi, dolor nam modi perspiciatis
              consequatur soluta.</p>
          </div>
        </div>
      </div>
    </div>
  </section>

Это удаляет отступы (или интервалы), которые по умолчанию включены в сетку BS.
Sohaib