Bootstrap 4 Карусель адаптивного дизайна - PullRequest
Новая
       28

Bootstrap 4 Карусель адаптивного дизайна

0 голосов
/ 11 июня 2018

Я создал страницу с помощью начальной загрузки 4. Я добавил Карусель с 4 предметами.Вы можете увидеть это здесь: Landing-Page с Bootstrap 4

И вот в чем проблема: когда загрузка закончится, у вас будет немного места по краю.Я скажу, что вы можете прокрутить вправо и там больше места, чего не должно быть.

Что я пытался исправить:

  • удаление кнопок слайдов
  • с использованием других типов карусели
  • изменение изображений / изменение их размера
  • закомментировал другие элементы, такие как div и nav, кроме карусели
  • пробовал другие браузеры (firefox, chrome, safari)

Надеюсь, это не ошибка.

Спасибо за помощь

Ответы [ 3 ]

0 голосов
/ 11 июня 2018 
<div id="ausbildung" class="row" style="height: 50px;"></div>

Bootstrap .row классы используют отрицательные поля для учета дочерних элементов, которые по умолчанию содержат отступы.Переопределите стиль .row с помощью 

.row {
    margin-left: 0px; 
    margin-right: 0px;
}

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

0 голосов
/ 11 июня 2018

Проблема возникает не из-за полей какой-либо строки (как это предлагается в принятом вами ответе), а из-за того, что некоторые строки не вложены в containers.

См. Здесь в документации сеточная система bs4 

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

А также здесь bs4 контейнеров , где четко указано, что Containers are the most basic layout element in Bootstrap and are required when using our default grid system.

Короче говоря, заполнение containers противодействовать отрицательным полям rows, которые, в свою очередь, противодействуют заполнению columns

SOLUTION

Любой верхний уровень row у вас есть, вы должны обернуть его внутри container, в вашем случае вы должны использовать container-fluid

0 голосов
/ 11 июня 2018

Вы можете решить проблему, посмотрев на элемент #ausbildung (между контейнером и jumbotron).

Его ширина на 30px больше, чем должна!

Попробуйте удалить поля на нем.

...