Question

我一直在研究我的Bootstrap Nav并且已经解决了这个问题，但不知何故在这个方面努力使得活动链接的底部边框占据文本的宽度，而不是容器它因此，想出这个想法，在活动链接的边界底部添加一些边距。经过多方努力，我得到的只是混乱的用户界面。我需要你们的帮助，今天能学到很多东西。

CODE

尝试添加代码段，但Bootstrap导航无法正常工作。

HTML

<!doctype html>
<html lang="en">
  <head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">    
  </head>
  <body>

     <!-- Just an image -->
     <nav class="navbar navbar-expand-lg navbar-light bg-light">
       <div class="container">
         <a class="navbar-brand" href="#home" style="border-bottom: none">HOME</a>
         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
         </button>
         <div class="col-lg-3"></div>
         <div class="pt-lg-0 pt-3 collapse navbar-collapse" id="navbarNavAltMarkup">
         <div class="navbar-nav">
            <a class="nav-item nav-link" href="#section-1">SECOND PAGE</a>
            <a class="nav-item nav-link" href="#section-2">THIRD PAGE</a>
        </div>
       </div>
      </div>
    </nav>

    <section class="testimonial home-page" id="home">
      <div class="container">
        <h1>Bringing ease to<br>each home</h1>
        <div class="d-none d-sm-block" style="margin-top: 350px"></div>
      </div>
    </section>

   <section class="testimonial home-page" id="section-1">
      <div class="container">
        <h1>Second Page</h1>
        <div class="d-none d-sm-block" style="margin-top: 350px"></div>
      </div>
   </section>

   <section class="testimonial home-page" id="section-2">
     <div class="container">
        <h1>Third Page</h1>
        <div class="d-none d-sm-block" style="margin-top: 350px"></div>
     </div>
   </section>
</body>
</html>

CSS

.navbar {
   top: 0px;
   width: 100%;
   z-index: 999;
   display: block;
   padding: 20px !important;
   position: fixed!important;
   -webkit-backface-visibility: hidden
 }

 .navbar-nav a {line-height: normal}
 .home-page H1 {padding-top: 219px;color: #616161}
 .active {color: grey!important; border-bottom: 5px solid #8ABE25}

JAVASCRIPT FOR ACTIVE LINK

$(document).ready(function () {
  $('.navbar div a').click(function(event){
    //remove all pre-existing active classes
    $('.active').removeClass('active');

    //add the active class to the link we clicked
    $(this).addClass('active');
  });
});

我从这个this尝试的是：

.active { 
  position: fixed!important;
  content: '';
  border-bottom: 1px solid #d2d7da;
  width: 70%;
  transform: translateX(-50%);
  bottom: -15px;
  left: 50%;
}

搞砸了我的UI。还尝试了box-sizing: border-box，但在我的案例中没有成功。

结果我想是这样的：

这是我的JsFiddle链接：JsFiddle Result 如果导航栏没有打开，请展开结果，以便您可以看到另一个选项，不知道为什么JsFiddle表现得很奇怪。任何帮助将不胜感激。

Answer 1

＆＃13;

$(document).ready(function () {
$('.navbar div a').click(function(event){
        //remove all pre-existing active classes
        $('.active').removeClass('active');

        //add the active class to the link we clicked
        $(this).addClass('active');
    });
});

＆＃13;

.navbar {
  top: 0px;
  width: 100%;
  z-index: 999;
  display: block;
  padding: 20px !important;
  position: fixed!important;
  -webkit-backface-visibility: hidden
}

.navbar-nav a {line-height: normal}
.home-page H1 {padding-top: 219px;color: #616161}
.active span {color: grey!important; position: relative; display: inline-block;}

.active span:after {
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:-4px;
    height: 5px;
    background-color: #8ABE25;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">    
  </head>
  <body>
  
    <!-- Just an image -->
    <nav class="navbar navbar-expand navbar-light bg-light">
      <div class="container">
        <a class="navbar-brand" href="#home" style="border-bottom: none">
          HOME
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="col-lg-3"></div>
        <div class="pt-lg-0 pt-3 collapse navbar-collapse" id="navbarNavAltMarkup">
          <div class="navbar-nav">
            <a class="nav-item nav-link" href="#section-1"><span>SECOND PAGE INFORMATION</span></a>
            <a class="nav-item nav-link" href="#section-2"><span>THIRD PAGE</span></a>
            <a class="nav-item nav-link" href="#section-2"><span>FOURTH PAGE</span></a>
            <a class="nav-item nav-link" href="#section-2"><span>FIFTH PAGE</span></a>
            <a class="nav-item nav-link" href="#section-2"><span>SIXTH PAGE</span></a>
          </div>
        </div>
      </div>
    </nav>
    
    <section class="testimonial home-page" id="home">
      <div class="container">
        <h1>Bringing ease to<br>each home</h1>
        <div class="d-none d-sm-block" style="margin-top: 350px"></div>
      </div>
    </section>
    
    <section class="testimonial home-page" id="section-1">
      <div class="container">
        <h1>Second Page</h1>
        <div class="d-none d-sm-block" style="margin-top: 350px"></div>
      </div>
    </section>
    
    <section class="testimonial home-page" id="section-2">
      <div class="container">
        <h1>Third Page</h1>
        <div class="d-none d-sm-block" style="margin-top: 350px"></div>
      </div>
    </section>
  </body>
</html>

＆＃13;

用span包装您的文字并提供以下样式。

.active span {color: grey!important; position: relative; display: inline-block;}

.active span:after {
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:-4px;
    height: 5px;
    background-color: #8ABE25;
}

在活动导航链接的边界底部添加边距而不影响文本

1 个答案: