如何在MVC视图中使用Bootstrap按钮插件

Question

我很难让Bootstrap的按钮插件在我的MVC视图中工作.我正在使用最新的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)中显示时,输入框和按钮之间存在很大差距.像这样:

如果我将div周围的大小减小input-group div到col-lg-3更小或更小,那就没问题了.但任何大于此的东西都会留下空隙.

就好像它的最大尺寸input- 实际上,我的所有东西inputs似乎都小了它们的容器div......

可能是什么导致了这个？

Answer 1

Site.css新MVC 5项目附带的默认样式表具有限制输入最大宽度的规则.你得到的是控制的结果,它跨越了它应该的全部可用宽度,但是输入本身被约束到一个定义的宽度.只需注释掉那段样式表,一切都会按原样运作.

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

这是团队为了快速构建示例站点而采取的相当令人震惊的捷径.