gpt4 book ai didi

html - Bootstrap 3 : keep navbar items outside the collapse without wrapping to a new line?

转载 作者:太空狗 更新时间:2023-10-29 14:21:00 26 4
gpt4 key购买 nike

<分区>

我可以使用一些帮助让我的 Bootstrap 3 导航栏在折叠时看起来正确。

如果这是一个重复的问题,我深表歉意,但经过长时间的搜索仍未找到我需要的答案。

我已经基于 Bootstrap 演示代码创建了一个响应式导航栏。在其中,有一个 40x40 图像和一个链接到下拉菜单的球形字形,我已将其右对齐并从导航折叠中省略。

不幸的是,当导航折叠时,40x40 和地球仪字形出现在新的一行上,这是我不想要的。

当导航折叠时,我的完美布局是让 40x40 和地球与我的品牌形象、折叠按钮等出现在同一行;右对齐,并且不包含在折叠中。

感谢您提供的任何建议!

代码是这样的:

    <nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-hd-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 href="index.php"><img class="navbar-brand img-responsive" src="http://placehold.it/138x38" alt="Logo"></a>
</div>
<div class="navbar-right">
<ul class="nav" style="float: right; display: inline-block !important">
<li class="dropdown pull-right">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><img src="http://placehold.it/40x40" alt="Profile Image" style="display: inline-block !important"/><b class="caret grey"></b></a>
<ul class="dropdown-menu">
<li class="dropdown-header">Hello</li>
<li class="divider"></li>
<li><a href="">Thing 1</a></li>
<li class="divider"></li>
<li><a href="">Thing 2</a></li>
</ul>
</li>
</ul>
<ul class="nav" style="float: right; display: inline-block !important">
<li class="dropdown pull-right">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-globe grey"></span><b class="caret grey"></b></a>
<ul class="dropdown-menu">
<li style="padding: 10px"><p>News</p></li>
</ul>
</li>
</ul>

         <div class="collapse navbar-collapse navbar-hd-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="">Product</a></li>
<li><a href="">Other Product</a></li>
<li><a href="">Third Product</a></li>
</ul>
</div>
</nav>

JS Fiddle 在这里:http://jsfiddle.net/CaraGee/q8br8/

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