如何在bootstrap 3中使导航栏与内容重叠

nbewdwxp  于 2022-12-07  发布在  Bootstrap
关注(0)|答案(1)|浏览(196)

我使用的是bootstrap的常规导航栏,而不是固定顶部的导航栏,我发现当.navbar{position: fixed;}时,它会重叠,但这不是我想要的。我希望当我向下滚动时,菜单停留在页面顶部,而不是随着页面移动,当菜单折叠时,内容会重叠。
这是目前为止我代码:

<div class="navbar-wrapper">
<div id="menu" class="navbar navbar-right navbar-default nob no-focus" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse ">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <!-- <a class="navbar-brand" href="#">Project name</a> -->
    </div>
    <div class="navbar-collapse collapse ">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div>
  </div>
</div>

这就是现在发生的情况,因为它是固定顶部的
[http"""""""""""""""
先谢谢你了。

3gtaxfhh

3gtaxfhh1#

试试这个,它会保持导航栏固定,而不是重叠,一旦你开始向下滚动。

<div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>

            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">

                        <li class="active"><a href="#">Home</a></li>
                         <li><a href="#about">About</a></li>
                          <li><a href="#contact">Contact</a></li>


                </ul>

            </div>
        </div>
    </div>

希望这对你有帮助:)

相关问题