Question

我正在尝试创建一个集中的登录表单，但是下面的代码输入文本左对齐，右边的图标对齐：

<div class="form-group">
    <div class="row">
        <div class="col-md-4 col-md-offset-4">
            <div class="input-group">
                @Html.TextBoxFor(m => m.Email, new { @class = "form-control", placeholder = "E-mail" })
                @Html.ValidationMessageFor(m => m.Email, "", new { @class = "text-danger" })
                <span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
            </div>
        </div>
    </div>
</div>

输入大小设置为280px（Site.css文件中的bootstrap默认值），我不想更改它。请参阅下面的结果图片，我想知道如何加入输入和图标，以及两者是否在列的中心。

我得到了预期的结果如下：

<div class="form-group">
                <div class="row">
                    <div class="col-md-4 col-md-offset-4">
                        <div align="center">
                            <div class="input-group" style="max-width: 280px">
                                @Html.TextBoxFor(m => m.Email, new { @class = "form-control", placeholder = "E-mail" })
                                <span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
                            </div>
                            @Html.ValidationMessageFor(m => m.Email, "", new { @class = "text-danger" })
                        </div>
                    </div>
                </div>
            </div>

JsFiddle

Answer 1

你应该这样做：

<div class="form-group">
    <div class="row">
        <div class="col-md-4 col-md-offset-4">
            <div class="input-group">
                @Html.TextBoxFor(m => m.Email, new { @class = "form-control", placeholder = "E-mail" })
                <span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
                @Html.ValidationMessageFor(m => m.Email, "", new { @class = "text-danger" })
            </div>
        </div>
    </div>
</div>

ValidationMessageFor呈现为 span 元素，并在输入和图标之间产生空格。

结果：

修改

如果您不想更改css，可以按照以下JQuery进行修改：

$('.input-group').find('input').removeAttr('style');

请参阅 jsfiddle 。

Answer 2

尝试：

<div class="form-group">
    <div class="row">
      <div class="col-md-4 col-md-offset-4">
        <div style="width: 280px">
          <div class="input-group">
            @Html.TextBoxFor(m => m.EMAIL, new { @class = "form-control", placeholder = "E-mail" })
            @Html.ValidationMessageFor(m => m.EMAIL, "", new { @class = "text-danger" })
            <span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
          </div>
        </div>
       </div>
     </div>
  </div>

将宽度样式放在div中而不是输入<div style="width: 280px"> ...输入字段... </div>

中心TextBoxFor，列中包含图标

2 个答案: