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; 
    }

这是它的一个笨拙； Bootstrap Navbar

Answer 1

首先，您需要在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>

Answer 2

对于小型/移动屏幕，您可以在下面的代码中使用nav-item悬停和文本中心nadbordr-bottom。

.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 3

尝试通过此方法更改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>

Bootstrap 4导航栏更改

3 个答案: