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

问题描述

我无法在我的MVC视图中使用Bootstrap的按钮插件 。我使用最新的NuGet版本的ASP.NET MVC（5.1 rc1）和Bootstrap（3.03）。

我在下面的视图中（现在我'我们使用 Html.EditorFor（），试图让它工作）：

  @using（Html.BeginForm（））
 {
 @ Html.AntiForgeryToken（）
 
& div class =form-horizo​​ntal> 
 @ Html.ValidationSummary（true）
 
< div class =row> 
< div class =col-lg-6> 
< div class =input-group> 
< input type =textclass =form-control/> 
< span class =input-group-btn> 
< button class =btn btn-defaulttype =button> Go！< / button> 
< / span> 
< / div> 
< / div> 
< div class =col-lg-6> 
& nbsp; 
< / div> 
< / div> 
  

这会生成以下HTML：

 < form action =xxxmethod =post> 
< input name =__ RequestVerificationTokentype =hiddenvalue =T3k .../> 
< div class =form-horizo​​ntal> 
< div class =row> 
< div class =col-lg-6> 
< div class =input-group> 
< input type =textclass =form-control/> 
< span class =input-group-btn> 
< button class =btn btn-defaulttype =button> Go！< / button> 
< / span> 
< / div> 
< / div> 
< div class =col-lg-6> 
& nbsp; 
< / div> 
< / div> 
< / div> 
< / forms>问题是，当它显示在浏览器（Chrome 32 / IE 11）中时，会出现这样的问题：
  

$ b <输入框和按钮之间的大间隙。像这样：

如果我减小围绕输入组 div 的 div >到 col-lg-3 或更小，很好。

这是因为输入上有一个最大尺寸，我所有的输入似乎小于他们的容器 div ...

$ Site.css code>样式表与一个新的MVC 5项目有一个规则限制输入的最大宽度。你得到的是控制跨越完全可用的宽度的结果，如果它是应该的，但然后输入，本身，被约束到一个定义的宽度。

  / *设置表单输入元素的宽度，因为它们默认是100％宽* / 
 input，
 select，
 textarea {
 max-width：280px; 
} 
  

这是一个非常令人震惊的快捷方式，团队似乎已经采取了为了快速构建示例网站。

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).

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>

This generates the following 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>

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:

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.

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...

What could be causing this?

解决方案

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;
}

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

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