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

Posted 2023-03-05

【中文标题】如何在我的 MVC 视图中使用 Bootstrap 按钮插件

【英文标题】：How can I use Bootstrap button addons in my MVC view

【发布时间】：2014-02-07 10:39:27

【问题描述】：

我很难让 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）中显示时，输入框和按钮之间有很大的差距。像这样：

如果我将围绕input-group div 的div 的大小减小到col-lg-3 或更小，就可以了。但任何比这更大的东西都会留下一个空白。

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

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

【参考方案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;

为了快速构建示例网站，团队似乎采取了一条相当令人震惊的捷径。

【讨论】：

除了注释掉那段CSS之外，还有其他选择吗？我希望我的控件最大宽度为 280 像素，但它们之间没有间隙？

没有。 BS3 中的表单控件是基于网格和响应式的。如果您使用任何静态宽度，它们将不起作用。

威利，我并不是说从长远来看这是一件好事，而是在范围内添加 css: 'input,select,textarea max-width: 100%;您尝试分组的内容将允许您做您想做的事情并保持您的 Site.css 原样。

从移动设备（小屏幕）的角度来看，除 100% 之外的任何定义的宽度（并使用 BS3 网格来控制大小）都会以次优布局结束。如果您的布局过于严格以至于 BS3 网格无法容纳它，您可能应该重新评估布局。