Делаем ссылки li / Action полностью кликабельными

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 / bootstrap:

.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

это должно работать с начальной загрузкой 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;
}