如何解决谷歌铬菜单导航栏布局问题与引导3?
问题描述:
这看起来在Firefox中恰到好处,但谷歌改变了布局。我不知道我错过了什么,使用自举3如何解决谷歌铬菜单导航栏布局问题与引导3?
看起来错在谷歌浏览器:
这是它是如何想看 - 像它在Firefox没有与下面的代码:
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="home.php">Logo</a>
<a href="#menu-toggle" class="navbar-brand pull-left" id="menu-toggle"><span class="glyphicon glyphicon-option-vertical glyphicon-lg pull-right"></span></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
<form method="get" action="home.php">
<div class="input-group search">
<!-- Search Button -->
<span class="input-group-btn">
<button class="btn btn-success" type="submit"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
</span>
<!-- /End search Button Icon -->
<!-- Search Text -->
<input type="text" name="search" id="search" style= "border: 0;" class="form-control" placeholder="Search for ..." />
<!-- End Search text -->
</div>
</form>
</li>
<li>
<div class='input-group search'>
<form action='home.php' method='post' >
<button type='submit' class='btn btn-success glyphicon glyphicon-plus-sign glyphicon-lg' name='Create' id='Create' value='Create' />
</form>
</div>
</li>
<li>
<a href="goodbye.php">Logout</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
答
每引导
将表单内容放在.navbar-form中以便在窄视口中进行适当的垂直对齐和折叠行为。使用对齐选项来决定它在导航栏内容中的位置。
因此,您可以将navbar-form
类添加到<form>
s来解决此处报告的问题。
<form class="navbar-form" ... >
Codepen向您展示它在IE,Edge,Chrome和Firefox中看起来相同。
就是这样! :) – Sol