Почему ряд внутри контейнера с жидкостью переполняется по оси x? - PullRequest
Новая
       20

Почему ряд внутри контейнера с жидкостью переполняется по оси x?

2 голосов
/ 25 апреля 2019

Я добавляю нижний колонтитул на свой сайт.Когда я добавляю его, это приводит к переполнению веб-сайта по оси X.Удаление полей в 15px в .row не вариант, потому что мне придется повторить все css 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<footer style="margin-top:20px;background-color:lightgrey">
    <div class="container-fluid" style="max-width:100%; margin:0px">
        <div class="row" style="margin:0px;width:100%">
            <div class="col-8" style="padding-bottom:10px !important; padding:40px">
                <h4 style="margin-top: 10px">Om</h4>
                <p class="text-muted" style="margin-top:7px">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum placerat malesuada leo. Vestibulum rutrum erat non diam feugiat pulvinar.
    Nam sit amet aliquam nibh. Vestibulum sed consequat elit. Ut sodales justo sit amet iaculis venenatis. Curabitur fermentum magna id nunc ullamcorper consectetur.
    Cras quis odio quis elit aliquet vulputate in nec nulla. Donec placerat bibendum ligula eget fringilla. Quisque sem ligula, sodales at est vitae, consectetur tempor justo.
                </p>
            </div>
            <div class="col-2" style="padding-bottom:10px !important;padding:40px">
                <h4 style="margin-top: 10px">Hurtige links</h4>
                <li style="list-style-type: none;">
                    <a href="/upload" style="margin-bottom:10px">Upload</a>
                </li>
                <li style="list-style-type: none;">
                    <a href="/profil/{{ current_user.bruger_url_id }}">Min profil</a>
                </li>
                <li style="list-style-type: none;">
                    <a href="/">Hjem</a>
                </li>
            </div>
            <div class="col-2" style="padding-bottom:10px !important;padding:40px; padding-left: 0px !important">
                <h4 style="margin-top: 10px">Ligegyldige links</h4>
                <li style="list-style-type: none;">
                    <a href="/betingelser">Betingelser</a>
                </li>
            </div>
        </div>
    </div>
    <div class="container-fluid" style="width:100%">
        <div class="row" style="width:100%;background-color:lightgrey">
            <div class="col-12" style="padding-top:0px !important;padding-bottom: 0px !important;padding:40px">
                <hr>
                <p>Copyright &copy; 2019 All Rights Reserved by Studii</p>
            </div>
        </div>
    </div>
</footer>

1 Ответ

0 голосов
/ 25 апреля 2019

контейнер-жидкость изначально был взят из Bootstrap 3.0, но добавлен обратно в 3.1.1

Чтобы это исправить, вы можете:

Используйте более новую версию таблицы стилей Bootstrap

Демонстрация с новой таблицей стилей в скрипке Или добавьте в класс самостоятельно

.row добавляет 15px поля слева и справа. поскольку .container-fluid заполняет 100% ширины экрана, дополнительный запас пробел вызывает проблемы переполнения.

Чтобы исправить это, вам нужно добавить отступы к классу .container-liquid 

.container-fluid {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

Демонстрация с классом контейнера Custom в Fiddle

...