引导词缀总是崩溃

Bootstrap affix always collapsing

本文关键字：崩溃      更新时间：2023-09-26

这是我的navBar的HTML:

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="custom-bootstrap-menu" class="navbar navbar-default " role="navigation" data-spy="affix" data-offset-top="195">
  <div class="container-fluid" data-spy="affix" data-offset-top="197">
    <div class="navbar-header"><a class="navbar-brand" href="#">Aakarsh Madhavan</a>
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
      </button>
    </div>
    <div class="collapse navbar-collapse navbar-menubuilder" data-spy="affix" data-offset-top="197">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="dj">About</a>
        </li>
        <li><a href="s">Skills</a>
        </li>
        <li><a href="s">Projects</a>
        </li>
        <li><a href="f">Resume</a>
        </li>
      </ul>
    </div>
  </div>
</div>

然而，这并没有产生一个正常的响应，它有一个完整的导航条在顶部，但当我滚动，导航条改变了一半。但是它不能正常工作，我试过把affix放在其他地方，但它似乎仍然不起作用?

body {
	height: 10000px;
}
#custom-bootstrap-menu.navbar-default .navbar-brand {
    color: rgba(255, 255, 255, 1);
}
#custom-bootstrap-menu.navbar-default {
    font-size: 22px;
    background-color: rgba(0, 0, 0, 1);
    background: -webkit-linear-gradient(top, rgba(87, 85, 85, 1) 0%, rgba(0, 0, 0, 1) 100%);
    background: linear-gradient(to bottom, rgba(87, 85, 85, 1) 0%, rgba(0, 0, 0, 1) 100%);
    border-width: 1px;
    border-radius: 4px;
}
#custom-bootstrap-menu #tag1 a{
    font-family: Chalkduster, Times, "Times New Roman";
}
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a {
    color: rgba(255, 255, 255, 1);
    background-color: rgba(0, 0, 0, 1);
    background: -webkit-linear-gradient(top, rgba(87, 85, 85, 1) 0%, rgba(0, 0, 0, 1) 100%);
    background: linear-gradient(to bottom, rgba(87, 85, 85, 1) 0%, rgba(0, 0, 0, 1) 100%);
}
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:hover,
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:focus {
    color: rgba(150, 90, 164, 1);
    background-color: rgba(0, 0, 0, 1);
    background: -webkit-linear-gradient(top, rgba(87, 85, 85, 1) 0%, rgba(0, 0, 0, 1) 100%);
    background: linear-gradient(to bottom, rgba(87, 85, 85, 1) 0%, rgba(0, 0, 0, 1) 100%);
}
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a,
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:hover,
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:focus {
    color: rgba(150, 90, 164, 1);
    background-color: rgba(255, 255, 255, 1);
}
#custom-bootstrap-menu.navbar-default .navbar-toggle {
    border-color: #ffffff;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle:hover,
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus {
    background-color: #ffffff;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle .icon-bar {
    background-color: #ffffff;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle:hover .icon-bar,
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus .icon-bar {
    background-color: #000000;
}
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="custom-bootstrap-menu" class="navbar navbar-default navbar-fixed-top" role="navigation" data-offset-top="195">
<div class="container-fluid" data-offset-top="197">
    <div class="navbar-header"><a class="navbar-brand" href="#">Aakarsh Madhavan</a>
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
        </button>
    </div>
    <div class="collapse navbar-collapse navbar-menubuilder"  data-offset-top="197">
        <ul class="nav navbar-nav navbar-right">
            <li><a href="dj">About</a>
            </li>
            <li><a href="s">Skills</a>
            </li>
            <li><a href="s">Projects</a>
            </li>
            <li><a href="f">Resume</a>
            </li>
        </ul>
    </div>
</div>

相关文章：