输入搜索中的宽度不起作用

时间:2017-10-13 04:41:02

标签: html css asp.net twitter-bootstrap twitter-bootstrap-3

我正在开发一个ASP.Net MVC项目,我使用一些引导类添加了一个搜索文本框:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
    <div class="col-lg-3"></div>
    <div class="col-lg-6">
        <form method="g" action="@Url.Action("Index")">
            <div class="input-group">
                <input type="search" 
                       name="searchTerm"
                       class="form-control"
                       placeholder="Search for..."
                       style="width: 100%;" />
                <span class="input-group-btn">
                    <input type="submit" value="Search" class="btn btn-default" />
                </span>
            </div>
        </form>
    </div>
    <div class="col-lg-3">
    </div>
</div>
上面的代码产生以下结果:

enter image description here

正如您所看到的,搜索文本框和“搜索”按钮之间有一个空格。我试着使用内联样式=“宽度:100%;”使输入搜索的宽度覆盖所有长度,并使文本框和搜索按钮相互靠近。

上面的代码中是否缺少某些内容?

1 个答案:

答案 0 :(得分:-1)

请删除style="width: 100%;" />。因为bootstrap已自动调整宽度