Question

我正在创建jumbotron并试图在我的网站上设置input-group表单进行搜索。问题是当我使用form和input添加button并尝试将表单调整为100％时，它不会粘在一起而input text没有＆＃ 39; t resize。

我该如何解决这个问题？

试图

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

Answer 2

你的Bootstrap代码工作正常，请查看pen。

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

很可能一些CSS代码干扰了Bootstrap的CSS。

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

2 个答案: