Bootstrap 4 如何将背景色设置为nav品牌？

@if（User.Identity.IsAuthenticated）
{










@User.FindFirst（“name”）.Value



}
其他的
{










登录
}

在第一幅图中，我们可以看到我把nav品牌的背景色改为红色。但有一个空间不是被红色填满的，为什么？我想用红色来填充那个颜色。

---

如何将导航栏中显示的空间显示为红色

您在

navbar

中的其他项目高于

navbar品牌

。这就是为什么会有差距

有两种方法可以做到这一点。一种方法是将导航栏的背景设置为红色，而不是白色。这样就可以了，因为

navbar品牌

的背景是透明的，而

navbar collapse

的背景是白色的：

---

将导航样式颜色白色更改为红色您可以检查生成的html吗（通过单击徽标，然后在浏览器控制台中“检查元素”？您也可以分享生成的html，让我们更好地理解。是否有其他css样式？我已经检查了您的CSS样式，您正在将
ul
背景色设置为白色，并将第一个
li
元素背景色设置为
navy
，在为其他
li
元素添加背景色后，输出，我这边的
li
元素之间没有空格，所以可能还有其他CSS样式，您可以创建一个简单的示例来复制它。其次，如果要设置空间背景色，可以将
ul
元素的背景色更改为“红色”。


<nav class="navbar navbar-expand-lg navbar-light " style="background-color:white;   box-shadow: 0px 8px 8px -6px rgba(0,0,0,.5);padding: 0 1rem">
    <a class="navbar-brand pt-0 pb-0" href="#" style="background-color:red;>
        <img id="logo" class="d-inline-block mr-1" alt="Logo" src="~/images/masycoda-solutions.png">

        <span></span>
    </a>




    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent" style="background-color:white">


        @if (User.Identity.IsAuthenticated)

        {




        <ul class="navbar-nav " style="color: rgb(22,53,71); background-color:white">




            <li class="nav-item active  " style="background-color:navy">
                <a class="nav-link" href="/" style="padding:1rem 1rem">
                    <div class="pl-5 pr-5 ml-4 mr-4">
                        <img src="/img/house.png" class=" ">Home <span class="sr-only ">(current)</span>

                    </div>
                </a>
            </li>

            <li class="nav-item active ">
                <a class="nav-link" href="/Home/Dashboard" style="padding:1rem 1rem">
                
                    <div class="pl-5 pr-5 ml-4 mr-4">
                        <img src="/img/house.png" class=" "> Dashboard 

                    </div>
                
               </a>
            </li>

            <li class="nav-item active ">
                <a class="nav-link" href="/Visitor/VisitorAnalysis" style="padding:1rem 1rem">
                    <div class="pl-5 pr-5 ml-4 mr-4">
                        <img src="~/img/pie-chart.png" />Visitors Analysis
                    </div>
                </a>
            </li>
            <li class="nav-item dropdown pl-5 pr-5 ml-3 mr-3 ">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="color:rgb(22,53,71);padding:1rem 1rem">
                    Users
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown" style="color:rgb(22,53,71)">
                    <a class="dropdown-item" href="/Users">Users List</a>
                    <a class="dropdown-item" href="/Users/Create">User Create</a>

                </div>
            </li>

            <li class="nav-item active   ">

                <img src="/images/Laura_Bush_portrait.jpg" class=" rounded-circle" style="width:26px;height:26px;">
                @User.FindFirst("name").Value<br>
                <a href="/AzureAD/Account/SignOut" style="margin-left:4%;">Sign out</a>


            </li>

        </ul>
           
        }

        else
        {
            <ul class="navbar-nav mr-auto" style="visibility:hidden;">




                <li class="nav-item active pl-5 pr-5 ">
                    <a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
                </li>

                <li class="nav-item active pl-5 pr-5">
                    <a class="nav-link" href="/Home/Dashboard">Dashboard</a>
                </li>

                <li class="nav-item active pl-5 pr-5">
                    <a class="nav-link" href="/Visitor/VisitorAnalysis">Visitors Analysis</a>
                </li>
                <li class="nav-item dropdown pl-5 pr-5 ">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Users
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item" href="/Users">Users List</a>
                        <a class="dropdown-item" href="/Users/Create">User Create</a>

                    </div>
                </li>

            </ul>

            <a asp-area="AzureAD" asp-controller="Account" asp-action="SignIn" >Sign in</a>

        }



    </div>
</nav>