asp.net-mvc – 如何在MVC视图中使用Bootstrap按钮插件

我很难让Bootstrap的 button addons在我的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周围的div的大小减小到col-lg-3或更小,那就没问题了.但任何大于此的东西都会留下空隙.

就好像输入的最大尺寸 – 实际上,我的所有输入似乎都小于它们的容器div …

可能是什么导致了这个？

解决方法

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

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

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

asp.net-mvc – 如何在MVC视图中使用Bootstrap按钮插件

解决方法

猜你在找的asp.Net相关文章