gpt4 book ai didi

twitter-bootstrap - 在 navbar-fixed-top 之前添加标题图像

转载 作者:行者123 更新时间:2023-12-03 13:24:26 25 4
gpt4 key购买 nike

如何添加标题图像以使其显示在导航栏固定顶部的顶部。当用户向下滚动时,导航栏会粘在顶部吗?

我尝试将它添加到容器中,但它没有按预期工作。

到目前为止,这是我的代码。

<body>
<header>
<img src="header/1024x100.png">
</header>
<div class="container-fluid">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#"></a>
<div class="nav-collapse collapse">
<p class="navbar-text pull-right">
Logged in as <a href="#" class="navbar-link">Username</a>
</p>
<ul class="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><!--/.nav-collapse -->
</div>
</div>
</div>

谢谢。

最佳答案

带有滚动导航的 JsFiddle check link

注意:如果您的图像小于屏幕尺寸,请将此片段插入您的 css

.masthead img{
width:100%;
}

html 应如下所示:
<div class="masthead">
<img src="http://placehold.it/940x150"/>
</div>
<!-- /container -->
<div class="navbar affix-top" data-spy="affix" data-offset-top="150">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li class="active"><a href="#">Home</a>

</li>
<li><a href="#">Link</a>

</li>
<li><a href="#">Link</a>

</li>
</ul>
</div>
</div>
</div>
<!-- navbar -->
<div class="container">
<div class="row-fluid">
<div class="span4">
content goes here
</div>
</div>
</div>

关于twitter-bootstrap - 在 navbar-fixed-top 之前添加标题图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15105018/

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