Bootstrap 4 изменения Navbar

Question

Вероятно, это действительно простые вопросы, но я немного озадачен CSS;

Как я могу заставить зеленый фон (при наведении на элемент навигации) занимать всю высоту панели навигации?

Кроме того, когда сворачиваемая панель навигации (для небольших / мобильных экранов), как я могу отцентрировать текст элемента навигации и добавить нижнюю границу для элемента навигации?

Вот мой HTML

<nav class="js-navbar-scroll navbar navbar-expand-lg navbar-light fixed-top navbar-custom">
      <div class="container-fluid">
        <a class="navbar-brand" href="/">
         <img src="img/logo-design-new.png" alt="JDC Support" style="width: 40px;" />
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarToggler">
          <ul class="navbar-nav ml-auto mt-2 mt-lg-0">
            <li class="nav-item mr-4 mb-2 mb-lg-0">
              <a class="nav-link" href="about">About</a>
            </li>
            <li class="nav-item mr-4 mb-2 mb-lg-0">
              <a class="nav-link" href="photos">Photos</a>
            </li>
            <li class="nav-item mr-4 mb-2 mb-lg-0">
              <a class="nav-link" href="collections">Collections</a>
            </li>
            <li class="nav-item mr-4 mb-2 mb-lg-0">
              <a class="nav-link" href="careers">Careers</a>
            </li>
            <li class="nav-item mr-4 mb-2 mb-lg-0">
              <a class="nav-link" href="contact">Contact</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

Вот мой CSS:

.navbar-custom {
      background-color: #fff !important;
      border-bottom: 2px solid #f1f1f1 !important;
    }

    .navbar-custom .container-fluid .nav-item.active .nav-link,
    .navbar-custom .container-fluid .nav-item:hover .nav-link {
        color: #ffffff;
        background-color: green; 
    }

И вот его Plunker; Bootstrap Navbar

Answer 1

Вы можете использовать приведенный ниже код для навигации по элементам навигации и текстового центра и скучного нижнего края для маленьких / мобильных экранов.

.nav-item:hover{
  background-color:green;
}
.collapse.show{
  text-align:center;

}
.collapse.show .nav-item{
  border-bottom:1px solid black;
}

Пожалуйста, покажите эту ссылку для этого.https://jsfiddle.net/DharaSumitPatel/8h1cwezq/

Answer 2

Попробуйте изменить свой CSS с этим

<style>
.navbar-custom {
    background-color: #fff !important;
    border-bottom: 2px solid #f1f1f1 !important;
    padding:0px;
    margin:0px;
  }

.navbar-custom .container-fluid .nav-item.active .nav-link,
.navbar-custom .container-fluid .nav-item:hover .nav-link {
      color: #ffffff;
      background-color: green; 
      border:2px solid green;

  }
#navbarToggler.show{
  text-align:center;
}
#navbarToggler.show 
.nav-item{
  border-bottom:1px solid gray;
}
</style>

 <nav class="js-navbar-scroll navbar navbar-expand-lg navbar-light fixed-top navbar-custom">
      <div class="container-fluid">
        <a class="navbar-brand" href="/">
         <img src="img/logo-design-new.png" alt="JDC Support" style="width: 40px;" />
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarToggler">
          <ul class="navbar-nav ml-auto mt-2 mt-lg-0">
            <li class="nav-item mr-4 mb-2 mb-lg-0">
              <a class="nav-link" href="about">About</a>
            </li>
            <li class="nav-item mr-4 mb-2 mb-lg-0">
              <a class="nav-link" href="photos">Photos</a>
            </li>
            <li class="nav-item mr-4 mb-2 mb-lg-0">
              <a class="nav-link" href="collections">Collections</a>
            </li>
            <li class="nav-item mr-4 mb-2 mb-lg-0">
              <a class="nav-link" href="careers">Careers</a>
            </li>
            <li class="nav-item mr-4 mb-2 mb-lg-0">
              <a class="nav-link" href="contact">Contact</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

Answer 3

Прежде всего вам нужно добавить jquery перед bootstrap js и добавить этот кастом css для того, что вы хотите

/* Styles go here */
.navbar-custom {
      background-color: #fff !important;
      border-bottom: 2px solid #f1f1f1 !important;
    }
   
    /* change the color of active or hovered links */
    .navbar-custom .container-fluid .nav-item.active .nav-link,
    .navbar-custom .container-fluid .nav-item:hover .nav-link {
        color: #ffffff;
        background-color: green; /* add background-color to active links */
    }

<link data-require="bootstrap@4.1.3" data-semver="4.1.3" rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
  <script data-require="jquery@3.2.1" data-semver="3.2.1" src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>  
  <script data-require="bootstrap@4.1.3" data-semver="4.1.3" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<style type="text/css">
    .navbar-custom{
      padding-top:0rem;
      padding-bottom:0rem;
    }
.nav-link {
    display: block;
    padding: 1rem 1rem;
}
@media (max-width: 991px){
     .navbar-custom{
      padding-top:0.5rem;
      padding-bottom:0.5rem;
    }
.nav-link {
    display: block;
    padding: 0.5rem 1rem;
} 
.navbar-light .navbar-nav .nav-link {
   text-align:center;
}
.navbar-light .navbar-nav .nav-item {
   border-bottom:5px solid #000000;
}
}
</style>
  <nav class="js-navbar-scroll navbar navbar-expand-lg navbar-light fixed-top navbar-custom">
    <div class="container-fluid">
      <a class="navbar-brand" href="/">
        <img src="img/logo-design-new.png" alt="JDC Support" style="width: 40px;" />
      </a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarToggler">
        <ul class="navbar-nav ml-auto mt-2 mt-lg-0">
          <li class="nav-item mr-4 mb-2 mb-lg-0">
            <a class="nav-link" href="about">About</a>
          </li>
          <li class="nav-item mr-4 mb-2 mb-lg-0">
            <a class="nav-link" href="photos">Photos</a>
          </li>
          <li class="nav-item mr-4 mb-2 mb-lg-0">
            <a class="nav-link" href="collections">Collections</a>
          </li>
          <li class="nav-item mr-4 mb-2 mb-lg-0">
            <a class="nav-link" href="careers">Careers</a>
          </li>
          <li class="nav-item mr-4 mb-2 mb-lg-0">
            <a class="nav-link" href="contact">Contact</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>