javascript - 尝试使用 MVC5 razor 中的 bootstrap 3 使 2 个表单字段彼此相邻(内联)

Question

我正在尝试并排获取 WorkPhone 和 WorkPhone Extension，并在跨越整个列宽度的上述字段下完美对齐。这有点管用，但是扩展字段向右延伸得太远了。理想的情况是它看起来像这样:

工作电话
[文本框] ext [文本框]

这是我的:

<div class="form-group">
    <div class="row">
        <div class="col-md-8">
            @Html.LabelFor(model => model.WorkPhone, htmlAttributes: new { @class = "control-label" })
            @Html.EditorFor(model => model.WorkPhone, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.WorkPhone, "", new { @class = "text-danger" })
        </div>
        <div class="col-md-4">
            @Html.LabelFor(model => model.WorkPhoneExt, htmlAttributes: new { @class = "control-label" })
            @Html.EditorFor(model => model.WorkPhoneExt, new { htmlAttributes = new { @class = "form-control" } })
        </div>
    </div>
</div>

Answer 1

我知道这是一个迟到的回复，只是偶然看到了这篇文章。希望您已经解决了这个问题，我将发布答案以防其他人需要使用它。

在你的<div class="form-group">您需要按如下方式添加 form-inline 类。 <div class="form-group form-inline">并像这样将其移动到行中。
<div class="row">
<div class="col-md-offset-1 col-md-12">
<div class="form-group form-inline">
还需要删除 <div class="col-md-8">和 <div class="col-md-4">部分，以便您可以将它们靠近在一起。
这是一个示例:

<div class="row">
  <div class="col-md-offset-1 col-md-12">
    <div class="form-group form-inline">
      @Html.LabelFor(model => model.WorkPhone, htmlAttributes: new { @class = "control-label" })
      @Html.EditorFor(model => model.WorkPhone, new { htmlAttributes = new { @class = "form-control", @style = "width:200px" } }) 
      @Html.ValidationMessageFor(model => model.WorkPhone, "", new { @class = "text-danger" }) 
      @Html.LabelFor(model => model.WorkPhoneExt, htmlAttributes: new { @class = "control-label" }) 
      @Html.EditorFor(model => model.WorkPhoneExt, new { htmlAttributes = new { @class = "form-control", @style = "width:75px" } })
    </div>
  </div>
</div>

我自己喜欢将标签放在方框上方，因为文本比新的 form-control 小类和文本框比标签文本大得多。我使用 col-md-12 执行此操作添加到标签类的类。
这是相关代码。

<div class="row">
                <div class="col-md-3">
                    <div class="form-group">
                        @Html.LabelFor(model => model.WorkPhone, htmlAttributes: new { @class = "control-label col-md-12" })
                        @Html.EditorFor(model => model.WorkPhone, new { htmlAttributes = new { @class = "form-control", @style = "width:200px" } })
                        @Html.ValidationMessageFor(model => model.WorkPhone, "", new { @class = "text-danger" })
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group">
                        @Html.LabelFor(model => model.WorkPhoneExt, htmlAttributes: new { @class = "control-label col-md-12" })
                        @Html.EditorFor(model => model.WorkPhoneExt, new { htmlAttributes = new { @class = "form-control", @style = "width:75px" } })
                        @Html.ValidationMessageFor(model => model.WorkPhoneExt, "", new { @class = "text-danger" })
                    </div>
                </div>
            </div>

希望这对某人有帮助。