Migrate from Bootstrap 3.3.7 to Bootstrap 4: huge

问题:

Once I migrated from Bootstrap 3.3.7 to Bootstrap 4, this issue occurred: It seems a part of the gap is form the body tag

And the other half is from the html tag

It seems there are huge gap between the footer and the bottom of the page

here is the bottom part of the source code:

   </div>
    <div id="wrap" class="container body-content">
        @RenderBody()
    </div>        
</main>
<nav id="bottomNav" class="navbar-fixed-bottom">
    <footer class="footer">
        <div class="footer-top">
        </div>
        <div class="footer-bottom">
            <div class="col-12 col-lg-8 footer-bar-left">
                <span>&copy; @DateTime.Now.Year</span>
            </div>
            <div class="col-12 col-lg-4 d-none">                       
            </div>
        </div>
    </footer>
</nav>     
@Scripts.Render("~/bundles/js/app")
@RenderSection("Scripts", required: false)

I have no idea why there are spaces created.

What's more, the footer should stick to the screen bottom when user scrolls the pages. However, the nav function doesn't work, once we migrated to Bootstrap v4.

Thanks in advance.

回答1:

Because I don't know most of your HTML code I cannot effectively tell you what is not working, but I had a similar issue on weekend and I got a solution, I edited your code based on my thoughts how it would look like:

<div class="container">
    <div class="row">
        <main>
            <div>
            </div>
            <div id="wrap" class="container body-content">
                @RenderBody()
            </div>
        </main>
    </div>

    <div class="row">
        <nav id="bottomNav" class="navbar-fixed-bottom">
            <footer class="footer">
                <div class="footer-top">
                </div>
                <div class="footer-bottom">
                    <div class="col-12 col-lg-8 footer-bar-left">
                        <span>&copy; @DateTime.Now.Year</span>
                    </div>
                    <div class="col-12 col-lg-4 d-none">
                    </div>
                </div>
            </footer>
        </nav>
    </div>
</div>
@Scripts.Render("~/bundles/js/app")
@RenderSection("Scripts", required: false)

What did you need to do in order to fix the huge gap?

You must set all the info in a container and then create individuals rows per section.

I got an idea from here:

Bootstrap panel collapse creating gaps

Hopefully, it fixes your problem too.

回答2:

The answer is straightforward. It is because we added 60px padding to the body tag. If we removed it, the issue is resolved.