如何使导航项到达页面末尾

Question

我是 Bootstrap 和网络开发的新手，但我正在尝试重新组织通过执行空白 asp.net 核心 2.2 网络应用程序生成的默认导航栏。生成此 Web 应用程序时，导航项会浮动到左侧，但在此导航栏中，我想添加另一个导航项以用于登录，并将其一直放置在页面右侧，类似于多少网站放置他们的登录链接。

我试过在容器和导航栏中调整边距和填充。当我更改容器左侧和右侧的边距时，它只会将整个导航栏向左或向右一个方向移动。我还打开并查看了 bootstrap.css 以查看其工作原理并尝试查看是否可以找到有用的信息。我也尝试过使用不同的导航栏类.

//I tried playing around with margins in my css as such
.container{
    padding-left: 0px;
    padding-right: 0px;
}

//part of my layout page

<header>
  `<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light 
   bg-white border-bottom box-shadow mb-3">
        <div class="container">
            <a class="navbar-brand" asp-area="" asp- 
   page="/Index">RazorPagesDemo</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 d-sm-inline-flex flex- 
   sm-row ">
                <ul class="navbar-nav flex-grow-1">
                    <li class="nav-item">
                        <a class="nav-link text-dark" asp-area="" asp- 
   page="/Index">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-dark" asp-area="" asp- 
   page="/Privacy">Privacy</a>
                    </li>
                </ul>
                <ul class="navbar-nav flex">
                    <li>
                        <a class="nav-link text-dark" asp-area="" asp- 
   page="/Login">Login</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
   </header>

在这里我想使我的登录导航项一直到达右上角。

Answer 1

只要您的导航位于 .container 内，由于 margin-left: auto 和 margin-right: auto.

，它将 max-width: 1140px 宽且居中

尝试使用 .container-fluid 或删除容器 div，这样它将是全宽的 "from left to right"。

Answer 2

您可以将样式设置为 position:absolute;right:0 以将其置于页面右侧：

<header>
    <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
        <div class="container">
            <a class="navbar-brand" asp-area="" asp-page="/Index">RazorPagesDemo</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 d-sm-inline-flex flex-sm-row ">
                <ul class="navbar-nav flex-grow-1">
                    <li class="nav-item">
                        <a class="nav-link text-dark" asp-area="" asp-
                           page="/Index">Home1</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-dark" asp-area="" asp-
                           page="/Privacy">Privacy1</a>
                    </li>

                </ul>
                <ul class="navbar-nav flex" style="position:absolute;right:0">
                    <li>
                        <a class="nav-link text-dark" asp-area="" asp-page="/Login">Login</a>
                    </li>

                </ul>
            </div>
        </div>
    </nav>
</header>

如何使导航项到达页面末尾

How to make a nav-item reach the end of the page

html

user-interface

asp.net-core

bootstrap-4

web-development-server