asp.net-mvc - 如何在我的 MVC View 中使用 Bootstrap 按钮插件

Question

我很难获得 Bootstrap 的 button addons在我的 MVC View 中工作。我正在使用最新的 NuGet 版本的 ASP.NET MVC (5.1 rc1) 和 Bootstrap (3.03)。

我的观点如下(现在我已经将它缩减为仅手工编码的 HTML，而不是使用 Html.EditorFor()，试图让它工作) :

@using (Html.BeginForm()) 
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        @Html.ValidationSummary(true)

        <div class="row">
            <div class="col-lg-6">
                <div class="input-group">
                    <input type="text" class="form-control" />
                    <span class="input-group-btn">
                        <button class="btn btn-default" type="button">Go!</button>
                    </span>
                </div>
            </div>
            <div class="col-lg-6">
                &nbsp;
            </div>
        </div>

这会生成以下 HTML:

<form action="xxx" method="post">
<input name="__RequestVerificationToken" type="hidden" value="T3k..." />
<div class="form-horizontal">
    <div class="row">
        <div class="col-lg-6">
            <div class="input-group">
                <input type="text" class="form-control" />
                <span class="input-group-btn">
                    <button class="btn btn-default" type="button">Go!</button>
                </span>
            </div>
        </div>
        <div class="col-lg-6">
            &nbsp;
        </div>
    </div>
</div>
</form>

问题是，当它在浏览器(Chrome 32/IE 11)中显示时，输入框和按钮之间有很大的差距。像这样:

如果我将 input-group div 周围的 div 的大小减小到 col-lg-3 或更小，没关系。但任何比这更大的东西都会留下一个缺口。

就好像 input 上有一个最大尺寸 - 实际上，我所有的 inputs 似乎都比它们的容器 div 小。 ..

这可能是什么原因造成的？

Answer 1

新 MVC 5 元素附带的默认 Site.css 样式表具有限制输入最大宽度的规则。你得到的是控件跨越整个可用宽度的结果，就像它应该的那样，但是输入本身被限制在一个定义的宽度。只需注释掉样式表的那一部分，一切都会正常工作。

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

为了快速构建示例站点，该团队似乎采用了一条非常离谱的捷径。