gpt4 book ai didi

html - Bootstrap : Extra Space in Collapsed Navbar between the brand name and the 3 Horizontal bars drop-down button

转载 作者:行者123 更新时间:2023-11-28 06:25:21 24 4
gpt4 key购买 nike

我正在为我的页面创建一个固定顶部导航栏,当导航栏折叠时(例如,对于小视口(viewport)),“品牌”名称和展开菜单图标之间有额外的空间。

这是正在发生的事情的图片: Extra Space in Collapsed Navbar

这是我的导航栏代码:

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class ="container">
<div class="navbar-header"><a class="navbar-brand" href="#">Brand</a></div>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navTop">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-collapse collapse" id="navTop" aria-expanded="false" style="height: 1px;">
<ul class="nav navbar-nav">
<li>
<a href="#">About</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"
style="padding-bottom: 7px;"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</li>
</ul>
</div>
</div>

你能帮我弄清楚如何删除多余的空间吗?谢谢!

最佳答案

您的 navbar-header 应该包含按钮,它目前在按钮开始之前结束。此外,(取决于您的用例)表单不需要位于 ul 内,如果确实如此,则会导致显示问题。参见 Docs

请参阅工作示例代码段。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navTop">
<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="#">Brand</a>
</div>
<div class="navbar-collapse collapse" id="navTop">
<ul class="nav navbar-nav">
<li>
<a href="#">About</a>
</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search"></span>
</button>
</div>
</div>
</form>
</div>
</div>
</nav>

关于html - Bootstrap : Extra Space in Collapsed Navbar between the brand name and the 3 Horizontal bars drop-down button,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35331447/

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