Невозможно выровнять выпадающее меню в навигационной панели bootstrap 4.4.1 в приложении mvc - PullRequest
Новая
       14

Невозможно выровнять выпадающее меню в навигационной панели bootstrap 4.4.1 в приложении mvc

1 голос
/ 03 мая 2020

Я пытаюсь отобразить раскрывающееся меню на панели навигации, используя следующий код: 

.menustyle {
        color: black;
        font-size: 18px;
    }

.dropdown-item {
        display: block;
        width: 100%;
        padding: 0.25rem 1.5rem;
        clear: both;
        font-weight: 400;
        color: #212529;
        text-align: inherit;
        white-space: nowrap;
        background-color: transparent;
        border: 0;
     }


<body>
 <nav class="navbar navbar-expand-lg navbar-light bg-light nav2" >
    <ul class="nav navbar-nav">
            <li>@Html.ActionLink("Link1", "", "", null, new { username = @ViewBag.username, @class = "menustyle" })</li>   
            <li>@Html.ActionLink("Link2", "", "", null, new { username = @ViewBag.username, @class = "menustyle" })</li>
            <li>@Html.ActionLink("Link3", "", "", null, new { username = @ViewBag.username, @class = "menustyle" })</li>
    </ul>



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

        <ul class="nav navbar-nav ml-auto">
                <li>@Html.ActionLink("Link4", "", "", null, new { username = @ViewBag.username, @class = "menustyle" })</li>

            <li>
                <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false" style="color:black">User</a>
                <ul class="dropdown-menu">
                    <li>@Html.ActionLink("Dropdown Link1", "", "", new { area = "" }, new { @class = "dropdown-item menustyle" })</li>
                    <li class="dropdown-divider"></li>
                    <li>@Html.ActionLink("Dropdown Link2", "", "", new { area = "" }, new { @class = "dropdown-item menustyle" })</li>
                </ul>
            </li>
            <li> @Html.ActionLink("Link6", "", "", new { @class = "menustyle" })</li>
        </ul>
    </div>
</nav>


, и это мой вывод. enter image description here

Как видите, выпадающий список пользователей не соответствует Link4 и Link6. Как отобразить их по прямой линии.

Кроме того, все работает нормально, когда я использую следующий код без каких-либо тегов @ Html .ActionLink 

<nav class="navbar navbar-expand-lg navbar-light bg-light nav2">
    <ul class="nav navbar-nav">
      <li class="nav-item"><a class="nav-link" href="#">Link 1</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Link 2</a></li> 
      <li class="nav-item"><a class="nav-link" href="#">Link 3</a></li> 
    </ul>



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

        <ul class="nav navbar-nav ml-auto">

                <li class="nav-item">
  <a class="nav-link" href="#">Link 4</a>
</li> 


            <li>
                <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false" style="color:black">User</a>
                <ul class="dropdown-menu">
                    <li><a class="nav-link" href="#">dropdownLink 1</a></li>
                    <li class="dropdown-divider"></li>
                    <li><a class="nav-link" href="#">dropdownLink 2</a></li>
                    <li class="dropdown-divider"></li>
                    <li class="menustyle"><a href="javascript:document.getElementById('logoutForm').submit()">Log off</a></li>
                </ul>
            </li>


            <li>
                <a class="nav-link" href="#">Link 6</a>
            </li>
        </ul>
    </div>
</nav>
...