Question

我是mvc的新手由于某种原因，我在这里遇到了一些造型问题。我似乎没有足够的空间容纳我的文字标签，而且它被全屏压扁。

我不是不，如果开始形式会弄乱造型，但在这里有一个真正的问题。

<div class="col-xs-12 col-sm-12">
@using (Html.BeginForm("Step1", "Forms", FormMethod.Post, new { @class = "form-horizontal" }))
<h4>Health Check - Personal Details</h4>
    <div class="form-group">
        <div class="col-xs-3 text-right">
            @Html.Label("First Name", new { @class = "col-md-2 control-label" })
        </div>
        <div class="col-xs-9">
            <input id="firstName" name="firstName" class="form-control" type="text" />
        </div>
    </div>

    <div class="form-group">
        <div class="col-xs-3 text-right">
            @Html.Label("Middle Name", new { @class = "col-md-2 control-label" })
        </div>

        <div class="col-xs-9">
            <input id="txtmiddleName" name="txtMiddleName" class="form-control" type="text" />
        </div>
    </div>
    <div class="form-group">
        <div class="col-xs-3 text-right">
            @Html.Label("Surname", new { @class = "col-md-2 control-label" })
        </div>

        <div class="col-xs-9">
            <input id="txtLastName" name="txtLastName" class="form-control" type="text" />
        </div>
    </div>

    <div class="form-group">
        <div class="col-xs-3 text-right">
            @Html.Label("Saluation", new { @class = "col-md-2 control-label" })
        </div>
        <div class="col-xs-9">
            <input id="txtSaluation" class="form-control" type="text" />
        </div>
    </div>

    <div class="form-group">
        <div class="col-xs-3 text-right">
            @Html.Label("Aliases", new { @class = "col-md-2 control-label" })
        </div>
        <div class="col-xs-9">
            <input id="txtAliases" class="form-control" type="text" />
        </div>
    </div>

    <div class="form-group">
        <div class="col-xs-3 text-right">
            @Html.Label("Maritial Status", new { @class = "col-md-2 control-label" })
        </div>
        <div class="col-xs-9">
            <input id="txtmStatus" class="form-control" type="text" />
        </div>
    </div>



    <div class="form-group">
        <div class="col-xs-3 text-right">
            @Html.Label("Address 1", new { @class = "col-md-2 control-label" })
        </div>
        <div class="col-xs-9">
            <input id="txtAddress1" class="form-control" type="text" />
        </div>
    </div>

    <div class="form-group">
        <div class="col-xs-3 text-right">
            @Html.Label("Address 2", new { @class = "col-md-2 control-label" })
        </div>
        <div class="col-xs-9">
            <input id="txtAddress2" class="form-control" type="text" />
        </div>
    </div>
    <div class="form-group">
        <div class="col-xs-3 text-right">
            @Html.Label("City", new { @class = "col-md-2 control-label" })
        </div>
        <div class="col-xs-9">
            <input id="txtmStatus" class="form-control" type="text" />
        </div>
    </div>

    <div class="form-group">
        <div class="col-xs-3 text-right">
            @Html.Label("Post Code", new { @class = "col-md-2 control-label" })
        </div>
        <div class="col-xs-9">
            <input id="txtmStatus" class="form-control" type="text" />
        </div>
    </div>

        <div class="form-group">
            <div class="col-xs-3 text-right">
                @Html.Label("County", new { @class = "col-md-2 control-label" })
            </div>

            <div class="col-xs-9">
                <input id="txtCounty" class="form-control" type="text" />
            </div>
        </div>
        <div class="form-group">
            <div class="col-xs-3 text-right">
                @Html.Label("Country", new { @class = "col-md-2 control-label" })
            </div>
            <div class="col-xs-9">
                <input id="txtmStatus" class="form-control" type="text" />
            </div>
        </div>

        <div class="form-group">
            <div class="col-xs-3 text-right">
                @Html.Label("Date Of Birth", new { @class = "col-md-2 control-label" })
            </div>
            <div class="col-xs-9">
                @(Html.Kendo().DatePicker()
          .Name("datepicker"))


            </div>
        </div>


        <div class="form-group">
            <div class="col-xs-3 text-right">
                @Html.Label("Home Tel No", new { @class = "col-md-2 control-label" })
            </div>
            <div class="col-xs-9">
                <input id="txtmStatus" class="form-control" type="text" />
            </div>
        </div>

        <div class="form-group">
            <div class="col-xs-3 text-right">
                @Html.Label("Home Work No", new { @class = "col-md-2 control-label" })
            </div>
            <div class="col-xs-9">
                <input id="txtmStatus" class="form-control" type="text" />
            </div>
        </div>


        <div class="form-group">
            <div class="col-xs-3 text-right">
                @Html.Label("Fax No", new { @class = "col-md-2 control-label" })
            </div>
            <div class="col-xs-9">
                <input id="txtFaxNo" name="txtFaxNo" class="form-control" type="text" />
            </div>
        </div>

        <div class="form-group">
            <div class="col-xs-3 text-right">
                @Html.Label("Mobile No", new { @class = "col-md-2 control-label" })
            </div>
            <div class="col-xs-9">
                <input id="txtMobile" name="txtMobile" class="form-control" type="text" />
            </div>
        </div>

        <button type="submit" id="btnSave">Save</button>

答案1适用于全屏，但移动时显示为

Answer 1

@Html.Label("Surname", new { @class = "col-md-2 control-label" })

渲染

<label class="col-md-2 control-label">Surname</label>

因此，您正在.col-md-2内嵌.col-xs-3。如果您看到form-horizontal docs

<div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
        <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
</div>

所以你可以为每个.form-group

尝试这样的事情

<div class="form-group">
    @Html.Label("Surname", new { @class = "col-md-3 control-label" })    
    <div class="col-md-9">
        <input id="txtLastName" name="txtLastName" class="form-control" type="text" />
    </div>
</div>

格式在表单上没有足够的标签空间

1 个答案: