ASP.Net MVC Bootstrap网格无法正常工作

Question

我在我的项目中使用bootstrap 3。问题是网格无法正常工作。

我在布局页面中引用了此序列中的CSS文件：

<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/bootstrap-reset.css" rel="stylesheet" />
<link href="~/Content/font-awesome.css" rel="stylesheet" />
<link href="~/Content/bucket-ico-fonts.css" rel="stylesheet" />
<link href="~/Content/style.css" rel="stylesheet" />
<link href="~/Content/style-responsive.css" rel="stylesheet" />
<link href="~/Content/toastr.min.css" rel="stylesheet" />
<link href="~/Content/datatable/dataTables.bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/datatable/responsive.bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/BootstrapoSwitch/bootstrap-switch.css" rel="stylesheet" />

我的JS文件按以下顺序排列：

<script src="/Scripts/jquery-3.0.0.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>
<script src="~/Scripts/jquery.dcjqaccordion.2.7.js"></script>
<script src="~/Scripts/jquery.scrollTo.min.js"></script>
<script src="~/Scripts/jquery.slimscroll.js"></script>
<script src="~/Scripts/jquery.nicescroll.js"></script>
<script src="~/Scripts/scripts.js"></script>
<script src="~/Scripts/toastr.min.js"></script>
<script src="~/Scripts/datatable/jquery.dataTables.min.js"></script>
<script src="~/Scripts/datatable/dataTables.bootstrap.min.js"></script>
<script src="~/Scripts/datatable/dataTables.responsive.min.js"></script>
<script src="~/Scripts/datatable/responsive.bootstrap.min.js"></script>
 <script src="~/Scripts/BootstrapSwitch/toggle-init.js"></script>
<script src="~/Scripts/BootstrapSwitch/bootstrap-switch.js"></script>

问题是我写这样的代码：

<div class="form-group">
        @Html.LabelFor(model => model.BankName, htmlAttributes: new { @class = "col-lg-3 col-sm-3 control-label" })
        <div class="col-md-9">
            @Html.EditorFor(model => model.BankName, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.BankName, "", new { @class = "text-danger" })
        </div>
    </div>

这是输出

col-md-9中的文本框应显示为全宽...但不起作用。

Answer 1

这个对我有用：

input{
max-width: 100%;
resize: none;
overflow: hidden;

}