问题背景:
我的导航栏包含以下内容:
当我通过将屏幕缩小为移动格式并重新打开它来折叠此导航栏时,搜索框和按钮将垂直向下移动,如下所示:
代码:
我无法弄清楚为什么会这样,这是HTML标记。任何帮助将不胜感激。
<div class="navbar-fixed-top">
<nav class="navbar navbar-default" role="navigation" id="nav">
<div class="container">
<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 logo">HS<b>WH</b></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<form role="form" class="form-inline">
<div class="form-group">
<ul class="nav navbar-nav">
<li><a href="@Url.Action("AllCatagories", "Catagory", new { id = 0})" class="scroll-link" data-id="myCarousel">Products</a></li>
<li><a href="@Url.Action("ViewCartContents", "Cart")" class="scroll-link" data-id="Welcome">Cart</a></li>
<li><a href="@Url.Action("ContactUs", "Contact")" class="scroll-link" data-id="features">Contact</a></li>
</ul>
</div>
<div class="input-group navbar-form navbar-right ">
<input type="text" class="form-control searchInput" name="searchTerm" placeholder="Search this site..." id="searchInput">
<button type="submit" value="click" class="btn btn-default searchBtn form-inline"><span class="glyphicon glyphicon-search"></span></button>
</div>
<div class="navbar-form navbar-right hidden-sm hidden-xs">
@Html.Action("MiniCart", "Cart")
</div>
</form>
</div>
</div>
</nav>
</div>