【问题标题】:width in input search not working输入搜索中的宽度不起作用
【发布时间】:2018-03-25 03:51:02
【问题描述】:

我正在开发一个 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>
上面的代码产生以下结果:

如您所见,搜索文本框和搜索按钮之间有一个空格。我尝试使用内联样式="width: 100%;"使输入搜索的宽度覆盖所有长度,并使文本框和搜索按钮相互关闭。

我在上面的代码中缺少什么吗?

【问题讨论】:

  • 在这里为我正常工作jsfiddle.net/lotusgodkk/GCu2D/2170。您是否有任何其他可能影响搜索的 CSS?
  • 没有像 JSFiddle 中的复制:jsfiddle.net/t36b81p7。您是否使用了其他覆盖 btn btn-defaultform-control 类的 CSS?
  • 这对我很有用!
  • 我刚刚通过添加引导库编辑了您的 sn-p 代码,它对我来说工作正常
  • 按照 K K 的建议,我发现问题出在作为 ASP.Net 模板的一部分添加到 Visual Studio 中的 Site.css 内部。 max-withth 设置为 280px;评论后,现在文本框和按钮之间没有空格了。

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


【解决方案1】:

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

【讨论】:

  • 那绝不会导致他提到的问题
猜你喜欢
  • 2016-10-07
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2019-08-12
  • 2015-04-18
  • 1970-01-01
相关资源
最近更新 更多