ASP.Net MVC Bootstrap Grid не работает должным образом

Question

Я использую загрузчик 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;

}