为什么流体容器内的一行会在 x 轴上溢出？

Question

我正在为我的网站添加页脚。当我添加它时，它会使网站在 x 轴上溢出。删除 .row 中的 15px 边距不是一个选项，因为我将不得不重做所有 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>

Answer 1

container-fluid was originally taken out of Bootstrap 3.0, but added back in 3.1.1

To fix this, you can either:

Use the newer version of Bootstrap style sheet

Demo with New Style Sheet in Fiddle Or add in the class yourself

The .row adds a 15px margin to the left and right. Since .container-fluid fills up 100% of the screen width, the extra margin space causes overflow issues.

To fix this, you need to add padding to .container-fluid class
.container-fluid {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
Demo with Custom container class in Fiddle

为什么流体容器内的一行会在 x 轴上溢出？

Why does a row inside a fluid container overflow on the x-axis?

html

css

overflow

bootstrap-4