Question

我一直在为我的MVC项目使用Bootstrap。问题是glyphicon（假设位于文本框的末尾）在框外。

我相信这是因为我试图将两个密码字段并排排列，但我没有告诉glyphicon重新对齐。

<div class="row">
    <div class="col-xs-6 form-group has-feedback">
        @Html.LabelFor(l => l.Password, new { @class = "control-label", @for = "pwd" })
        @Html.PasswordFor(l => l.Password, new { id = "pwd", @class = "form-control" })
        <span class="glyphicon glyphicon-ok form-control-feedback"></span>
    </div>
    <div class="form-group has-feedback col-xs-6">
        <label class="control-label" for="pwd2">@Res.Resource.PasswordConfirm</label>
        @Html.PasswordFor(l => l.Password, new { id = "pwd2", @class = "form-control" })
        <span class="glyphicon glyphicon-ok form-control-feedback"></span>
    </div>
</div>

提前致谢

Answer 1

这是因为您要在.form-control列上添加.has-feedback和<div>类。它应该是该列的子<div>。

查看左列（同一元素上的类）和右列（嵌套<div>＆＃39; s）之间的差异。

＆＃13;

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row">
      <div class="col-xs-6 form-group has-feedback">
        <label for="pwd" class="control-label">label</label>
        <input type="password" id="pwd" class="form-control" />
        <span class="glyphicon glyphicon-ok form-control-feedback"></span>
      </div>
    <div class="col-xs-6">
      <div class="form-group has-feedback">
        <label for="pwd" class="control-label">label</label>
        <input type="password" id="pwd" class="form-control" />
        <span class="glyphicon glyphicon-ok form-control-feedback"></span>
      </div>
    </div>
  </div>
</div>

＆＃13;

失败的原因是图标相对于具有has-feedback类的元素定位。在左侧示例中，col-xs-6类具有15px的填充（用于列之间的装订线/空格）。这使图标向右移动15px。

Bootstrap form-group has-feedback glyphicon alignment issue

1 个答案: