尝试在 MVC5 razor 中使用 bootstrap 3 使 2 个表单字段彼此相邻（内联）

Question

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

工作Phone
[文本框] 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

我知道这是一个迟到的回复，只是运行跨越 post。希望你已经弄明白了，我正在 post 给出答案以防其他人需要使用它。

在您的 <div class="form-group"> 中，您需要按如下方式添加内联表单 class。<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 class 小，文本框比标签文本大得多。我使用添加到标签 class 的 col-md-12 class 来执行此操作。
这是相关代码。

<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>

希望这对某人有所帮助。

尝试在 MVC5 razor 中使用 bootstrap 3 使 2 个表单字段彼此相邻（内联）

Trying to get 2 form fields next to each other (inline) using bootstrap 3 in MVC5 razor

javascript

css

asp.net-mvc

razor

twitter-bootstrap