如何使用引导按钮插件在我的MVC视图 [英] How can I use Bootstrap button addons in my MVC view

问题描述

我有困难得到引导的按钮插件的在我的MVC视图工作。我使用ASP.NET MVC（RC1 5.1）和Bootstrap的最新版本的NuGet（3.03）。

I'm having difficulty getting Bootstrap's button addons to work in my MVC view. I'm using the latest NuGet version of ASP.NET MVC (5.1 rc1) and Bootstrap (3.03).

我有我的观点如下（现在我已经回吐回只是手工codeD HTML而不是使用 Html.EditorFor（），企图得到它的工作）：

I have the following in my view (now that I've pared it back to just hand-coded HTML rather than using Html.EditorFor(), in an attempt to getting it to work):

@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/11 IE），有输入框和按钮之间有很大的差距。这样的：

The problem is that, when this is displayed in the browser (Chrome 32 / IE 11), there's a big gap between the input box and the button. Like this:

如果我减少的 DIV 围绕输入组 DIV <大小/ code>到 COL-LG-3 或更小，它的罚款。但是什么比这更大留下了缺口。

If I reduce the size of the div surrounding the input-group div to col-lg-3 or smaller, it's fine. But anything larger than that leaves a gap.

就好像有一个在输入最大尺寸 - 事实上，我所有的输入似乎是他们的小容器 DIV ...

It's as though there's a maximum size on the input - and indeed, all my inputs do seem to be smaller their container div...

什么引起的？

推荐答案

默认的site.css 样式表，配备了新的MVC项目5具有限制的规则投入最大宽度。什么你得到是控制跨越完整可用宽度象它应该，但随后的输入，本身，被约束到一个定义的宽度的结果。注释掉那件样式表，一切都会工作，因为它应该。

The default Site.css stylesheet that comes with a new MVC 5 project has a rule that limits the max-width of inputs. What you're getting is the result of the control spanning the full available width like it's supposed to, but then the input, itself, is being constrained to a defined width. Just comment out that piece of the stylesheet and everything will work as it should.

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

这是一个pretty恶劣快捷球队似乎已经采取，以快速建立示例站点。

It's a pretty egregious shortcut the team seems to have taken in order to quickly build the sample site.

这篇关于如何使用引导按钮插件在我的MVC视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！