Question

我正在使用Bootstrap 4启动新站点，并且从一开始就遇到问题。我的导航栏菜单与身体内容的某些部分重叠，我被卡住了。

我正在附加一个糟糕的草稿，您会在其中看到导航栏（故意将其设置为50％的宽度以显示此内容）重叠。

事实上，我希望身体内容（图像等）垂直居中，这是最重要的问题，但是我也想知道导航栏为何重叠。

Site.css：

html, body {
    height: 100%;
    padding-top: 50px;
    padding-bottom: 20px;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

Layout.cshtml：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    <nav class="navbar navbar-expand-sm navbar-dark fixed-top bg-dark">
        <div class="container">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"></button>
            <a class="navbar-brand" href="/">Application name</a>
            <div class="navbar-collapse collapse" id="navbarSupportedContent">
                <ul class="nav navbar-nav mr-auto">
                    <li class="nav-item"><a href="/" class="nav-link">Home</a></li>
                    <li class="nav-item"><a href="/Home/About" class="nav-link">About</a></li>
                    <li class="nav-item"><a href="/Home/Contact" class="nav-link">Contact</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right mr-auto">
                    <li class="nav-item"><a href="/Account/Register" id="registerLink" class="nav-link">Register</a></li>
                    <li class="nav-item"><a href="/Account/Login" id="loginLink" class="nav-link">Log in</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right mr-auto">
                    <li class="nav-item"><img src="~/Content/img/bandera_catalunya.png" alt="car_accident" class="nav-link" style="width: 50px;" /></li>
                    <li class="nav-item"><img src="~/Content/img/bandera_espana.png" alt="car_accident" class="nav-link" style="width: 50px;" /></li>
                </ul>
            </div>
        </div>
    </nav>
    <div class="container-fluid h-100 body-content" style="background-color:antiquewhite;">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

Index.html：

<div class="container" style="background-color: aqua">
    @*align-items-center h-100*@
    <div class="row">
        <div class="col-md-4">
            <div class="row">
                <div class="col-md-6">
                    @Html.LabelFor(model => model.Year)
                </div>
                <div class="col-md-6">
                    @Html.DropDownListFor(model => model.Year, new SelectList(Model.Years, "Value", "Text"), new { @class = "form-control year-dropdown", style = "font-size:120%;" })
                </div>
            </div>
            <div class="row p-2"></div>
            <div class="row">
                <div class="col-md-6">
                    Edad en el momento del accidente
                </div>
                <div class="col-md-6">
                    @Html.DropDownListFor(model => model.Year, new SelectList(Model.Ages, "Value", "Text"), new { @class = "form-control year-dropdown" })
                </div>
            </div>
        </div>
        <div class="col-md-8">
            <img src="~/Content/img/accident-1497298.jpg" alt="car_accident" class="img-fluid w-100" />
        </div>
    </div>
</div>

任何有助于将身体内容垂直居中并确定为什么重叠问题将受到高度重视的帮助。

Answer 1

navbar的{{1}}为min-height，但我认为右边的标志图像将其推得更大。

50px的{{1}}中的body使导航栏与主体重叠，以增加空间。

解决此问题的一种方法是增加padding-top元素上的50px。

Bootstrap 4导航栏菜单重叠正文内容

1 个答案: