php - 如何在 中将 Bootstrap 徽章与 AJAX 对齐

Question

我目前正在开发一个网站，客户用户可以在该网站上请求卡车。 当客户请求卡车时会有通知。只有管​​理员才能看到。但是当我开始使用AJAX 进行实时通知时，我无法正确对齐徽章。因为我必须将徽章(已经与 mysql 一起使用)放在 <div> 中标签。

---

请看图片。 这就是我想要发生的事情 (Please click) 正如您在图片中看到的那样，右侧的徽章已正确对齐。但这就是我现在拥有的: (Please click)非常感谢您的帮助。这是我的代码:

使用 AJAX 的脚本:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js">
</script>  

<script>
// <!--Realtime AJAX CODE-->

function ajax(){

var req = new XMLHttpRequest();

req.onreadystatechange = function(){

if(req.readyState == 4 && req.status == 200){
            // (badge) id name of div
document.getElementById('badge').innerHTML = req.responseText; 
} 
}
req.open('GET','badge.php',true); //(badge.php) file to fetch requests
req.send();

}
setInterval(function(){ajax()},1000);

// <!--End-->
</script>

Bootstrap :

<!-- start of NAV TABS HERE -->
<ul class="nav nav-tabs">
  <li role="presentation"><a href="index.php" title="Home page">Home</a>
    </li>
  <li role="presentation" class="active"><a href="trucks.php" 
      title="Trucks">Trucks</a></li>
  <li role="presentation"><a href="suppliers.php" 
      title="Suppliers">Suppliers</a></li>
  <li role="presentation"><a href="clients.php" title="Clients">Clients</a>
     </li>
  <li role="presentation"><a href="services.php" 
      title="Services">Services</a></li>
  <li role="presentation"><a href="accountspayables.php" title="Uploaded 
      Files">Uploaded Files</a></li>
  <li role="presentation"><a href="maintenance.php" 
      title="Maintenance">Maintenance</a></li>
  <!--  DROPDOWN start -->
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" 
      aria-haspopup="true" aria-expanded="false">
      About us <span class="caret"></span>
    </a>
 <ul class="dropdown-menu">
   <li role="presentation"><a href="contactus.php" title="Contact 
      us">Contact us</a></li>
   <li role="presentation"><a href="aboutus.php" title="About us">About 
      us</a></li>
 </ul>
 </li>
 <!-- END OF DROPDOWN -->

<!--  TRUCK REQUESTS START -->
 <li role="presentation"><a href="truckrequest.php" title="Truck request">
  <i class="fa fa-truck" style="font-size:21px;"></i>
    <!-- container for badge.php -->
    <div id="badge"></a></div>
 </li>

徽章.php:

<?php 
$conn = mysqli_connect("localhost", "root", "", "crb");
$query = "SELECT COUNT(*) AS total FROM truckrequest WHERE STATUS=0";
$result = mysqli_query($conn, $query);
while ($row = mysqli_fetch_array($result)) {
  //fetch number of pending requests from table
?>
  <span class="badge"><?= $row["total"] ?></span></a>
<?php  }
?>

Answer 1

只需为此使用以下 CSS 并使用以下内容更新您的 HTML

<li role="presentation"><a href="truckrequest.php" title="Truck request"><i class="fa fa-truck" style="font-size:21px;"></i>
 <div id="badge"></div></a>
</li>

.nav-tabs li a i , .nav-tabs li a #badge {
    display: inline-block;
    vertical-align: middle;
}