Question

我刚刚创建了网页，但在该页面中的标签和值位于不同位置，如下所示

这是视图页面代码段

<div class="form-group">
    @Html.LabelFor(x => x.Label[i].NameEn, Model.Label[i].NameEn, htmlAttributes: new { @class = "control-label col-md-2" })//Label  
    <div class="col-md-10">     
        @Html.Raw(Model.val[i].Value_EN)  //Value                      
    </div>
</div>

Answer 1

试试这段代码：

<div class="form-group">
    <div class="col-lg-3">
        @Html.Label("My Label 1", new { @class = "control-label" })
    </div>
    <div class="col-lg-6">
        @Html.TextBox("My Label 1", "My Label Message1", 
            new { @class = "form-control" })
    </div>
    <div class="col-lg-3">
        @Html.Label("Error Message", new { @class = "form-label" })
    </div>
</div>

Answer 2

因为您使用的是 bootstrap ，所以您应该注意如何使用col-md col-sm col-xs等。

如果你这样做，它应该对齐它们

<div class="form-group">
    <div class="col-md-2>
    @Html.LabelFor(x => x.Label[i].NameEn, Model.Label[i].NameEn,       htmlAttributes: new { @class = "control-label col-md-2" })//Label  
    </div>
    <div class="col-md-10">     
        @Html.Raw(Model.val[i].Value_EN)  //Value                      
    </div>
</div>

或者将它们再次放入另一个DIV

 <div class="form-group">
  <div>
        <div class="col-md-2>
        @Html.LabelFor(x => x.Label[i].NameEn, Model.Label[i].NameEn,       htmlAttributes: new { @class = "control-label col-md-2" })//Label  
        </div>
        <div class="col-md-10">     
            @Html.Raw(Model.val[i].Value_EN)  //Value                      
        </div>
  </div>

希望这有帮助

Answer 3

我自己找到了答案

<div class="form-horizontal">

           <div class="form-group">
                   @Html.LabelFor(x => x.Label[i].NameEn, Model.Label[i].NameEn, htmlAttributes: new { @class = "control-label col-md-2" })//Label 
                <div class="col-md-10">
                    <div class="form-control">
                      @Html.Raw(Model.val[i].Value_EN)  //Value
                    </div>
                </div>
            </div>    
 </div>

标签和值重新定位到同一行

3 个答案: