如何修改模态弹出窗口及其字段和标签的大小

Question

我正在开发一个asp.net mvc Web应用程序。我有以下视图，我在模态弹出窗口中渲染： -

@model SkillManagement.Models.Staff

@{
    ViewBag.Title = "Edit";
}
@if (Request.IsAjaxRequest()) { Html.RenderPartial("_modalHeader"); }
<h2>Edit Staff</h2>


@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">

        <hr />
        @Html.ValidationSummary(true)
        @Html.HiddenFor(model => model.StaffID)
        @Html.HiddenFor(model => model.timestamp)


        <div class="form-group">
            @Html.LabelFor(model => model.UserName, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.UserName, new { htmlAttributes = new { @class = "form-control", disabled = "disabled" } })
                @*@Html.ValidationMessageFor(model => model.UserName)*@
            </div>
        </div>


        <div class="form-group">
            @Html.LabelFor(model => model.PrimaryRole, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.TextAreaFor(model => model.PrimaryRole, new { @class = "form-control", rows = 10 })
                @Html.ValidationMessageFor(model => model.PrimaryRole)
            </div>
        </div>
        <br />

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Save" class="btn btn-default" /> |  @Html.ActionLink("Back to List", "Index")
            </div>
        </div>
    </div>
}



@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

脚本是： -

$(function () {
    $.ajaxSetup({ cache: false });
    $("a[data-modal]").on("click", function (e) {

        $('#myModalContent').load(this.href, function () {
            $('#myModal').modal({
                height: 1000,
                width: 1200,
                resizable: true,
                keyboard: true
            }, 'show');
            $('#myModalContent').removeData("validator");
            $('#myModalContent').removeData("unobtrusiveValidation");
            $.validator.unobtrusive.parse('#myModalContent');
            bindForm(this);
        });
        return false;
    });

目前结果有些不太令人愉快，因为;字段标签显示在两行上，列有点大+模态弹出窗口需要调整其宽度。结果是： -

现在我使用firebug工具检测列的以下css： -

*:before, *:after {
    box-sizing: border-box;
}
*:before, *:after {
    box-sizing: border-box;
}
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
    background-color: #eeeeee;
    cursor: not-allowed;
    opacity: 1;
}
button[disabled], html input[disabled] {
    cursor: default;
}
input[type="text"], input[type="password"] {
    max-width: 280px;
}
.form-control {
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
    color: #555;
    display: block;
    font-size: 14px;
    height: 34px;
    line-height: 1.42857;
    padding: 6px 12px;
    transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
    width: 100%;
}

* {
    box-sizing: border-box;
}
.form-control::-moz-placeholder {
    color: #999999;
    opacity: 1;
}

以下css标签： -

*:before, *:after {
    box-sizing: border-box;
}
*:before, *:after {
    box-sizing: border-box;
}
.form-horizontal .control-label {
    margin-bottom: 0;
    padding-top: 9px;
    text-align: left;
}

.col-md-2 {
    width: 16.6667%;
}
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
    float: left;
}
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
}
label {
    display: inline-block;
    font-weight: bold;
    margin-bottom: 5px;
    max-width: 100%;
}
* {
    box-sizing: border-box;
}
body {
    color: #555555;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 14px;
    line-height: 1.42857;
}

有人可以建议如何改善外观吗？