Bootstrap 3.1.1 导航栏表单反馈未对齐答案

【问题标题】：Bootstrap 3.1.1 Navbar Form Feedback MisalignedBootstrap 3.1.1 导航栏表单反馈未对齐
【发布时间】：2014-04-01 16:11:00
【问题描述】：

在 >=768px 的屏幕上，一切正常。当用户输入错误的用户名或密码时，表单字段会发出红/黄/绿光，并在右侧出现一个小字形。如果您调整大小小于 768 像素，它会切换到移动视图，包括一个可折叠的导航栏（我的登录表单所在的位置）。在折叠的导航栏上，反馈字形图标位于表单字段下方而不是其中。

PHP 控制在对 mysql 进行登录检查后使字段处于何种状态。像<?php echo $form_error['user']; ?> 这样的行只需将文本“has-success”、“has-warning”或“has-error”放在类作业中。同样，<?php echo $form_error['user_glyph']; ?> 行将替换为 glyphicon 本身的 <span> 标签。（如果难以理解，请参阅底部的渲染源）

这是我的导航源代码：

    <body>
      <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">BrandLogo</a>
          </div>
          <div class="navbar-collapse collapse">
            <form class="navbar-form navbar-right" action="login.php" method="post">
              <div class="form-group has-feedback <?php echo $form_error['user']; ?>">
                <label class="sr-only" for="ip-username">Username</label>
                <input type="text" placeholder="Username" class="form-control" name="username" id="ip-username" value="<?php echo $submitted_username; ?>" required/>
                <?php echo $form_error['user_glyph']; ?>
              </div>
              <div class="form-group has-feedback <?php echo $form_error['password']; ?>">
                <label class="sr-only" for="ip-password">Password</label>
                <input type="password" placeholder="Password" class="form-control glyphicon-ok" name="password" id="ip-password" required/>
                <?php echo $form_error['password_glyph']; ?>
              </div>
              <button type="submit" value="Login" class="btn btn-success">Log in</button>
            </form>
          </div><!--/.navbar-collapse -->
        </div>
      </div>

为了澄清任何混淆，这里是提交无效密码后的渲染源（仅显示 <form> 块，因为没有其他内容是动态的）：

    <form class="navbar-form navbar-right" action="login.php" method="post">
      <div class="form-group has-feedback has-success">
        <label class="sr-only" for="ip-username">Username</label>
        <input type="text" placeholder="Username" class="form-control" name="username" id="ip-username" value="some-username" required/>
        <span class="glyphicon glyphicon-ok form-control-feedback"></span>
      </div>
      <div class="form-group has-feedback has-error">
        <label class="sr-only" for="ip-password">Password</label>
        <input type="password" placeholder="Password" class="form-control glyphicon-ok" name="password" id="ip-password" required/>
        <span class="glyphicon glyphicon-remove form-control-feedback"></span>
      </div>
      <button type="submit" value="Login" class="btn btn-success">Log in</button>
    </form>

CSS 是未更改的引导程序 3.1.1。如何让小视图像其他视图一样正常工作？

提前致谢！

【问题讨论】：

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

不知道它为什么这样做，但如果你添加：

.navbar-form .has-feedback .form-control-feedback {
    top:0;
}

到你的 css 它应该修复它。

另见：Bootstrap 3 has-feedback icon alignment with field sizing doesn't seem to work

我认为这可能是 Bootstrap 中的一个错误。

【讨论】：

谢谢 joshhunt，这或多或少是个问题。我做了一些挖掘，很明显，当视口

【解决方案2】：

我发现解决方案是使用 style='top:0px;' 内联设置 <span> 标签的样式

我仍然不明白为什么我需要这样做。在折叠视图中，导航栏类似乎不再适用（它给出了 0px 顶部值而不是 .has-feedback .form-control-feedback 中的 25px）

这是执行此操作的 css 块：

    @media (min-width: 768px)
    .navbar-form .has-feedback .form-control-feedback

@media 行似乎阻止它影响小视图。我将使用内联 css 来解决这个问题，因为我不知道响应式代码会影响哪些其他方面。

【讨论】：

【解决方案3】：

这个 CSS 应该在大多数情况下修复它。

.has-feedback label.sr-only ~ .form-control-feedback {
    top: 0;
}

额外的好处，它允许您在同一站点的表单中同时使用sr-only 标签和非sr-only 标签。

【讨论】：