css - 我怎样才能调整输入组的大小？

Question

我正在创建一个 jumbotron 并尝试放置一个 input-group 表单以在我的网站上进行搜索。问题是当我添加带有 input 和 button 的 form 并尝试将表单的大小调整为 100% 时，它不会粘在一起并且输入文本不调整大小。

我该如何解决这个问题？

尝试

<div class="jumbotron"> 
    <div class="row">
        <div class="col-md-4">
            <div class="img-responsive" style="margin:-50px 0 -20px 20px;">
                <a href="@Url.Action("Index","Home")"><img src="~/Imagens/logo.png" /></a>
            </div>
        </div>
        <div class="col-md-4">
            @using (Html.BeginForm("view", "Home", FormMethod.Post, new { role = "form" })){
                @Html.AntiForgeryToken()
                @Html.ValidationSummary(true)

                <div class="input-group">
                    <input type="text" class="form-control" placeholder="What do you looking for ?">
                    <div class="input-group-btn">
                        <button class="btn glyphicon glyphicon-search"></button>
                    </div>
                </div>
            }
        </div>
        <div class="col-md-4">
            @Html.Partial("_LoginPartial")
        </div>
    </div>
</div><!--jumbotron-->

Answer 1

您的页面上有一些自定义 CSS？ 也许这段代码可能是问题所在..

看看:

<div class="jumbotron"> 
<div class="row">
    <div class="col-md-4">
        <form>
            <div class="input-group">
                <input type="text" class="form-control" placeholder="What do you looking for ?">
                <div class="input-group-btn">
                    <button class="btn glyphicon glyphicon-search"></button>
                </div>
            </div>
        </form>
    </div>
</div>

https://jsfiddle.net/AlvaroAlves/0jrkhuy0/