Question

我已经写了这部分来实现这个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>

现在在这个Label和TextBox下我希望将Phone和Ext标签和文本框对齐，所以我添加了这个：

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

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

Answer 1

为什么不为标签使用span类？

使用CSS设置span类的margin / padding的样式。您可以根据自己的喜好自定义列的长度：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>

在第一行的一个文本框下面安装第二行的两个文本框

1 个答案: