将第二行的两个文本框放在第一行的一个文本框下方答案

【问题标题】：Fitting two textboxes of a second row under one text box of the first row将第二行的两个文本框放在第一行的一个文本框下方
【发布时间】：2016-08-11 16:05:02
【问题描述】：

我写了这部分来实现这个 UI：

        <div class="row form-group">
            <div class="col-sm-offset-2 col-sm-1 text-right">@Html.Label("Email", new {@class = "control-label"})</div>
            <div class="col-sm-4">
                @Html.TextBox("AdminEmail", null, new {@style = "width:100%;padding-right:30px;"})
                <span class="glyphicon glyphicon-envelope form-control-feedback" style="right: 10px; line-height: 27px;"></span>
            </div>

            <div class="col-sm-4 col-sm-offset-1">
                <div>
                    @Html.CheckBox("ShowAdminPhone", new {@class = "checkbox-inline"})
                    @Html.Label("Show Admin phone", new {@class = "control-label"})
                </div>
            </div>
        </div>

现在在这个标签和文本框下，我想要一个电话和分机标签和文本框对齐，所以我添加了这个：

        <div class="row form-group">
            <div class="col-sm-offset-2 col-sm-1 text-right">@Html.Label("Phone", new {@class = "control-label"})</div>
            <div class="col-sm-2">
                @Html.TextBox("AdminPhone")
            </div>

            <div class="col-sm-1 text-right">@Html.Label("Ext", new { @class = "control-label" })</div>
            <div class="col-sm-2">
                @Html.TextBox("AdminExt")
            </div>
        </div>

但现在看起来像这样，请注意，Ext 的标签很远，而 Ext 的文本框也很远，它们应该都适合电子邮件文本框。
我做错了什么？

【问题讨论】：

标签： css asp.net-mvc twitter-bootstrap razor

【解决方案1】：

您为什么不对标签使用跨度类？

使用 CSS 设置跨度类的边距/填充样式。您可以根据自己的喜好自定义列的长度：http://getbootstrap.com/css/#grid

编辑：

        <div class="row form-group">
         <div class="col-md-6 text-right">
          <span class="form-label">@Html.Label("Email", new {@class = "control-label"})</span>
          <span class="form-textbox">
            @Html.TextBox("AdminEmail", null, new {@style = "width:100%;padding-right:30px;"})
            <span class="glyphicon glyphicon-envelope form-control-feedback" style="right: 10px; line-height: 27px;"></span></span>
         </div>

        <div class="col-md-6 text-center">
            <span class="form-checkbox">
                @Html.CheckBox("ShowAdminPhone", new {@class = "checkbox-inline"})</span>
             <span class="form-label>   @Html.Label("Show Admin phone", new {@class = "control-label"})</span>
        </div>
    </div>

<div class="row form-group">
        <div class="col-md-6 text-right">
          <span class="form-label">@Html.Label("Phone", new {@class = "control-label"})</span>
          <span class="form-textbox">
            @Html.TextBox("AdminPhone")
          </span>
        </div>

        <div class="col-md-6 text-right">
          <span class="form-label">@Html.Label("Ext", new { @class = "control-label" })</span>
        <span class="form-textbox">
            @Html.TextBox("AdminExt")
        </span>
    </div>
</div>

【讨论】：

我对所有前端开发的东西都很陌生，你能解释一下你的想法吗？谢谢。