Bootstrap输入控制宽度太短

时间:2017-03-29 13:25:06

标签: html css twitter-bootstrap asp.net-mvc-5

我的控件显示使用Bootstrap 3的问题远远低于100%。这是一个例子:

Screenshot

正如您所看到的,除了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>

如何让我的控件填充容器的宽度?

1 个答案:

答案 0 :(得分:1)

如果您通过模板生成项目,请在Content/Site.css

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