我在对齐导航栏的内容时遇到问题。我正在尝试使用以下代码右对齐菜单的内容。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Sample Application</title>
@Styles.Render("~/Content/css")
@Styles.Render("~/bundles/modernizr")
</head>
<body>
<h1 align="Center">Sample Application</h1>
<nav class="navbar navbar-expand-md " style="background-color:#993300">
<ul class="nav navbar-nav ml-auto ">
<li>
@Html.ActionLink("Help!", "Help", "Home", new { area = "" }, new { @class = "navbar-brand", @style = "color:white" })
</li>
</ul>
</nav>
@RenderBody()
</body>
</html>
这是输出。
我想将帮助向左移动，如箭头所示。我如何做到这一点？任何帮助将不胜感激
最佳答案
如果您将导航栏内容包装在 container 中，它会将宽度限制为容器宽度。把他们带进来。如果您想要特定的右边距，则必须自己定义。您还应该将 nav-item 类添加到您的 li 元素，将 nav-link 类添加到您的 a 标签。
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<h1 align="Center">Sample Application</h1>
<nav class="navbar navbar-expand-md navbar-dark" style="background-color:#993300">
<div class="container">
<ul class="nav navbar-nav ml-auto ">
<li class="nav-item">
<a href="#" class="nav-link">Help!</a>
</li>
</ul>
</div>
</nav>关于html - 如何使用 Bootstrap 4.3.1 版移动导航栏中的元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59058647/