gpt4 book ai didi

css - 如何使导航栏位置 :absolute; with bootstrap?

转载 作者:太空宇宙 更新时间:2023-11-04 03:21:52 25 4
gpt4 key购买 nike

这是我的导航栏 html:

<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">EsportGRID</a>
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li <?php if(Request::path() == "/") { echo 'class="active"'; } ?>><a href="/">Start</a></li>
<li <?php if(Request::path() == "about") { echo 'class="active"'; } ?>><a href="/about">About</a></li>
</ul>

<ul class="nav navbar-nav navbar-right">
<div class="divider"></div>
<?php if(Auth::check()) { ?>
<li><a href="#">{{ ucfirst(Auth::user()->username); }}</a></li>
<li><a href="{{ URL::route('logout') }}">Logout</a></li>
<?php }else{ ?>
<li <?php if(Request::path() == "login") { echo 'class="active"'; } ?>><a href="/login">Login</a></li>
<li <?php if(Request::path() == "registration") {echo 'class="active"'; } ?>> <a href="/registration">Registration</a></li>
<?php } ?>
</ul>
</div><!-- /.navbar-collapse -->
</nav>

This is my CSS:

body, html {
height: 100%;
margin: 0;
overflow:hidden;
}

.navbar .navbar-default{
position:absolute !important;
}

*{
border-radius:0 !important;
}

我这辈子都无法使导航栏位置绝对,使其跟随滚动。会很感激一些帮助。我试过使用 !important 而不是使用 !important,但我认为问题主要在于容器。

最佳答案

我想你可能想要 navbar-fixed-top

http://getbootstrap.com/components/#navbar-fixed-top

<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
...
</div>
</nav>

关于css - 如何使导航栏位置 :absolute; with bootstrap?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27766547/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com