Bootstrap 输入控件宽度太短

Question

我的控件在使用 Bootstrap 3 时显示远低于 100%。这是一个示例：

如您所见，除了 Tags 控件之外的所有控件都比它们的容器短得多。在将其设为 Tokenfield 后，标签开始以全长显示。生成这个的代码是：

<div class="row">
    <div class="col-md-12">
        <div class="panel panel-default">
            <div class="panel-heading clearfix">
                <b class="panel-title">Information</b>
                <a href="#" data-toggle="collapse" data-target="#Information" style="color: black;"><span id="InfoCollapseIcon"></span></a>
            </div>
            <div class="panel-body panel-collapse collapse in" id="Information">
                <div class="form-group">
                    @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label text-left col-md-4" })
                    <div class="col-md-8">
                        @Html.TextBoxFor(model => model.Name, htmlAttributes: new { @class = "form-control", @title = "The unique name of the generator." })
                        @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
                    </div>
                </div>

                <!-- Rinse and Repeat the above -->
            </div>
        </div>
    </div>
</div>

如何让我的控件填满容器的宽度？

Answer 1

如果您从模板生成项目，请检查 Content/Site.css 中的此规则

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