Bootstrap 3.1.1導航欄反饋未對齊

在屏幕> = 768px，一切正常。當用戶輸入不正確的用戶名或密碼時，表單字段會發出紅色/黃色/綠色，並向右側顯示一個小字形。如果您調整大小小於768px，它將切換到包含可摺疊導航欄（我的登錄表單位於其中）的移動視圖。在摺疊的導航欄上，反饋圖標位於表單域下方，而不是在表單域內。Bootstrap 3.1.1導航欄反饋未對齊

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。如何讓小視圖像其他視圖一樣正常工作？

在此先感謝！

來源

2014-04-01 helo

我發現，解決辦法是使用樣式style='top:0px;'

我還是不正是爲什麼我需要做雖然這遵循<span>標籤內聯。這似乎在摺疊視圖的導航欄類不再適用（這給0像素頂級價值，而不是從。先後反饋.FORM控制反饋25px的）

這是CSS塊做的：

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

@media行似乎阻止它影響小視圖。我將使用內聯css來解決這個問題，因爲我不知道被動代碼影響的其他方面。

來源

2014-04-02 12:14:28 helo

不知道它爲什麼這樣做，但如果添加：

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

到你的CSS應該修復它。

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

我認爲這可能是在引導的錯誤。

來源

2014-04-02 00:49:59 joshhunt

謝謝joshhunt，這或多或少是個問題。我做了一些挖掘，很明顯navbar類在viewports <768px時不適用於glyphicons。我發佈了另一個答案（與更多的細節相同），希望能夠幫助任何人在這方面遇到困難。我不得不將其設置爲內聯以適用。它的作品，因爲這個元素應該是頂部：0px在每個視圖。 – helo

這個CSS應該可以解決大多數情況。

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

額外的好處，它可以讓你在同一地點同時使用sr-only標籤和非sr-only標籤在你的形式。

來源

2014-04-11 00:57:00 Sean

Bootstrap 3.1.1導航欄反饋未對齊

回答

相關問題