Html 扩展导航栏标题中的搜索输入

在示例中，搜索输入非常长，直到页面结束。我复制了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>

@ActionLink（“KTEMB Veritabanı”，“Index”，“Members”，new{area=”“}，new{@class=“navbar brand”}）

@ActionLink（“Üyeler”、“Index”、“Members”）
@ActionLink（“KayıtlıPersonel”、“Index”、“Employees”）

@*@Html.Partial（“_LoginPartial”）*@

---

您需要使用.form组和.input组，如：

<div class="form-group">
  <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>

---

您引用的示例使用Bootstrap 3.1，使用3.3.x可以解释为什么它不适合您。您将遇到的其他一些示例也使用较旧版本的引导，因此它们不能与较新版本的BS一起使用

这个效果好一点。将

.form组

类保留为100%宽度（这是默认值）是导致问题的原因之一，因此将其更改为95%或更小是可行的。另外，当使用float类时，它似乎失败了，比如

.navbar right

，（这就是它被转换为

内联

）的原因，所以要小心那些

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

---

请提供您的代码的现场演示。（容器流体）和（容器）似乎占据了此处的全部宽度。