#html #css #bootstrap-4
#HTML #css #bootstrap-4
Вопрос:
Я борюсь с проблемой, с которой никогда раньше не сталкивался. Я искал помощь в Интернете (в основном здесь, в SO, но безрезультатно, потому что, похоже, никто не сталкивался с этой проблемой).
Я разрабатываю сайт с Bootstrap 4. Я не новичок ни в Bootstrap, ни в HTML и CSS. Я начал с размера рабочего стола (я знаю, «мобильный-первый», но дело не в этом). Дело в том, что я дошел до того, что добавил отзывчивость и добрался до мобильного размера. Когда я окно просмотра находится под 576px, .container получает width: 100% , что является обычным поведением. Но, к моему удивлению, я понял, что даже будучи width: 100% (я вижу, как он проверяет), мой контент расширяется по горизонтали всего на 50% (приблизительно, это зависит от изменения размера) до области просмотра. Тестируя вещи и многое другое, я добрался до объединения, которое <html> само по себе (в верхней части всего), которое не занимает 100% области просмотра. 
Я даже попытался вернуться с помощью Git к предыдущим и ранним ветвям, чтобы изолировать проблему, но проблема уже была там.
Я не вижу причины для такого поведения. Я перепробовал все, но безрезультатно. Может быть, это самая простая и глупая вещь, но я в отчаянии. Кто-нибудь может помочь, пожалуйста? Заранее спасибо!
Комментарии:
1. Я предполагаю, что есть один или несколько элементов, которые переполняют общий html-контейнер. Попробуйте использовать инструмент проверки браузера.
2. @DebsmitaPaul спасибо, но я не уверен, что понимаю вас. Не могли бы вы уточнить, пожалуйста? Я использовал инструмент инспектора браузера, как я уже указывал в своем вопросе, это первое, что я всегда делаю.
3. @DolevDublon Я сделал то, что вы предложили: codesandbox.io/s/blazing-pine-o5doo и самое смешное, что там, в CodeSandbox, он работает просто отлично (очевидно, что в нем отсутствуют файлы img, но суть в сетке). Я этого не понимаю. Я пробовал разные браузеры локально, но результат был одинаковым.
4. И да, @DolevDublon, я попытался установить для «html» и «body» ширину 100%, и они (или, по крайней мере, так говорит инспектор, но результат — это то, что вы видите на картинке. Как будто каким-то образом ширина 100% не равна 100% области просмотра при мобильном размере. Я также пробовал «100vw», но безрезультатно.
5. @DebsmitaPaul спасибо за вашу помощь. Я, наконец, нашел ошибку. Как вы предположили, были изображения, которые переполняли контейнер. Вот почему в CodeSandbox без изображений все было в порядке. Спасибо Долеву Деблону тоже 🙂