使整个li / Action Link可点击

Question

我有一个汉堡菜单，并且有一个下拉菜单，我希望整个下拉菜单都可以单击。这就是我现在所拥有的。目前只有文字是可点击的。

cshtml

<nav class="navbar fixed-top navbar-dark bg-primary">
<a class="navbar-brand" href="#">Foo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbar">
    <span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="collapsingNavbar">
    <ul class="navbar-nav">
        <li class="nav-item a">
            @Html.ActionLink("Bar", "Index", "Bar", null)
        </li>
        <li class="nav-item a">
            @Html.ActionLink("Quax", "Index", "Quaxx", null)
        </li>
    </ul>
</div>

css /引导程序：

.navbar-collapse {


-ms-flex-preferred-size: 100%;
  flex-basis: 100%;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -ms-flex-align: center;
  align-items: center;
}

.navbar-toggler {
  padding: 0.25rem 0.75rem;
  font-size: 1.25rem;
  line-height: 1;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 0.25rem;
}

.nav-item{
  height: 50px;
  border-color: white;
  border-width: 2px;
  border-top: 1px dotted #d5d5d5;
  border-bottom: 1px dotted #d5d5d5;
  vertical-align: middle;
}

.nav-item a{
  color: white;
  background: transparent;
  font-size: larger;
}

基本上，我希望每个菜单项的整个行/整个宽度都是可点击的

Answer 1

为此btn-block

添加类别

<li class="nav-item mx-0">
    <a class="nav-link btn-block">foo</a>
</li>

或

添加此CSS

.nav-item a{
  display:block;
}

Answer 2

这应该与bootstrap 4一起使用

<li class="nav-item mx-0">
    <a class="nav-link px-0">foo</a>
</li>

但是如果您想手动进行

 .nav-item{
margin-left:0;
margin-right:0;
}

.nav-item a{
padding-left:0;
padding-right:0;
}