Question

在屏幕上＆gt; = 768px，一切都很棒。当用户输入错误的用户名或密码时，表单字段会发出红色/黄色/绿色，并向右侧显示一个小字形。如果您调整小于768px，则会切换到移动视图，包括可折叠导航栏（我的登录表单所在的位置）。在折叠的导航栏上，反馈字形将在表单字段下方而不是在其中。

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是未改变的bootstrap 3.1.1。如何让小视图像其他视图一样正常工作？

提前致谢！

Answer 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中的一个错误。

Answer 2

我发现解决方案是使用<span>

来内联style='top:0px;'代码内联样式

我仍然没有完全遵循为什么我需要这样做。在折叠视图中似乎导航栏类不再适用（从.has-feedback .form-control-feedback中提供0px顶部值而不是25px）

这是执行此操作的css块：

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

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

Answer 3

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

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

添加了奖励，它允许您在同一网站上的表单中使用sr-only标签和非sr-only标签。

Bootstrap 3.1.1 Navbar表单反馈未对齐

3 个答案: