在this例如,搜索输入很长,直到页面末尾。我复制了 html 代码,但由于某种原因我的代码很短,无法真正找出使它变长的部分?有什么诀窍?
我的导航栏代码:
<div 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=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
@Html.ActionLink("KTEMB Veritabanı", "Index", "Members", new { area = "" }, new { @class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("Üyeler", "Index", "Members")</li>
<li>@Html.ActionLink("Kayıtlı Personel", "Index", "Employees")</li>
</ul>
@*@Html.Partial("_LoginPartial")*@
<form class="navbar-form">
<div class="form-group" style="display:inline;">
<div class="input-group">
<input type="text" class="form-control" placeholder="What are searching for?">
<span class="input-group-addon"><span class="glyphicon glyphicon-search"></span> </span>
</div>
</div>
</form>
</div>
</div>
</div>
最佳答案
您引用的示例使用 Bootstrap 3.1,使用 3.3.x 可以解释为什么它不适合您。您会遇到的其他一些示例也使用较旧版本的 Bootstrap - 因此它们无法与较新版本的 BS 一起使用。
这样效果会好一些。将 .form-group
类保留为 100% 宽度(默认)是导致问题的原因之一,因此将其更改为 95% 或更少是可行的。此外,它似乎在使用 float 类时失败,例如 .navbar-right
,(这就是它被转换为 inline
的原因)所以要注意那些......
<div class="collapse navbar-collapse">
<form class="navbar-form" role="search">
<div class="form-group" style="display:inline; float:right; width:95%;">
<div class="input-group" style="width:100%">
<input type="text" class="form-control" placeholder="Search">
<span class="input-group-addon" style="width:1%"><span class="glyphicon glyphicon-search"></span></span>
</div>
</div>
</form>
</div>
关于html - 在导航栏标题中扩展搜索输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32278623/