html - 在导航栏标题中扩展搜索输入

Question

在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>

Answer 1

您引用的示例使用 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>