时间戳

首页 > 解决方案 > Bootstrap 4页脚显示在正文上

html - Bootstrap 4页脚显示在正文上

问题描述

我是引导程序和 CSS 的新手，所以请原谅任何新手的废话！

我正在使用 ASP.NET Core 和使用 VS 2019 的 Bootstrap 4.3.1 做一个基本的 Web 应用程序。我似乎遇到了布局页面的问题，其中来自剃刀页面的文本与页脚重叠。

这是页面的显示方式

razor 页面中的正文无非是一堆h6和p标签，没有其他格式或标签，但页面文本相当长。

_Layout.cshtml 文件的标记如下。我已经尝试按照向我建议的方式将页脚的 z-index 更改为 99，但这并没有奏效。我相信答案很简单，并突出了我天生缺乏知识，但任何有助于阻止正文和页脚混合的帮助将不胜感激。

有关信息，这将显示在 Chrome 中。

有任何问题或如果我错过了任何信息，请询问。

提前致谢。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>@ViewData["Title"]</title>
        <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
        <link rel="stylesheet" href="~/css/site.css" />
    </head>
    <body>
        <header>
            <nav class="navbar navbar-light bg-white border-bottom box-shadow mb-3">
                <div class="container">
                    <a class="navbar-brand" asp-area="" asp-page="/Index">Start Mortgages</a>
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="navbar-collapse collapse flex-sm-row-reverse">
                        <ul class="navbar-nav flex-grow-1">
                            <li class="nav-item">
                                <a class="nav-link text-dark" asp-area="" asp-page="/Link1">Link 1</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link text-dark" asp-area="" asp-page="/Link2">Link 2</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link text-dark" asp-area="" asp-page="/Link3">Link 3</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link text-dark" asp-area="" asp-page="/Link4">Link 4</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link text-dark" asp-area="" asp-page="/Link5">Link 5</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link text-dark" asp-area="" asp-page="/Link6">Link 6</a>
                            </li>
                            <li class="nav-item border-top">
                                <a class="nav-link text-dark" asp-area="" asp-page="/Link7">Link 7</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
        </header>
        <div class="container">
            <main role="main" class="pb-3 small overflow-auto">
                @RenderBody()
            </main>
        </div>
        <footer class="border-top footer text-muted text-center small" style="line-height: 20px;">
            <div class="container pt-3">
                <div class="row pb-3">
                    <div class="col-4 text-left pb-3">
                        Company Name<br />
                        Address 1<br />
                        Address 2<br />
                        Address 3<br />
                        Address 4<br />
                        Address 5
                    </div>
                    <div class="col-4">

                    </div>
                    <div class="col-4 text-left">
                        <div>
                            LINKS
                        </div>
                        <div>
                            <a asp-area="" asp-page="/Link8">Link 8</a>
                        </div>
                        <div>
                            <a asp-area="" asp-page="/Link9">Link 9</a>
                        </div>
                        <div>
                            <a asp-area="" asp-page="/Link10">Link 10</a>
                        </div>
                        <div>
                            <a asp-area="" asp-page="/Link11">Link 11</a>
                        </div>
                    </div>
                </div>
                <div class="text-wrap">
                    <div>Company Registration Info</div>
                    <div>Company Regulator Info</div>
                </div>
            </div>
        </footer>
        <script src="~/lib/jquery/dist/jquery.min.js"></script>
        <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
        <script src="~/js/site.js" asp-append-version="true"></script>
        @RenderSection("Scripts", required: false)
    </body>
</html>

标签： htmlcssbootstrap-4footer

解决方案

推荐阅读