Bootstrap 4 Navbar更改

3 回答

• 0

  对于小型/移动屏幕，您可以使用以下代码进行导航项悬停和文本中心nad boredr-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/

  回复于 2024-04-27T02:56:21+08:00
• 0

  尝试用这个改变你的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>
  

  回复于 2024-04-27T02:56:21+08:00
• 0

  首先，您需要在 bootstrap js 之前添加 jquery ，并根据需要添加此自定义 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>
  

  回复于 2024-04-27T02:56:21+08:00