尝试使用MVC5剃刀中的bootstrap 3获取彼此相邻的两个表单字段(内联)

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>

我自己喜欢将标签放在方框上方,因为Text小于新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>

希望这有助于某人.