Я сделал панель навигации с версией загрузчика 4.4.1.Когда я вошел в систему, кнопка выхода из системы и имя пользователя (Добро пожаловать, (имя пользователя)!) Остаются слева.Они должны идти очень правой стороной, как кнопка входа в систему.Я пытался вставить кнопку без ссылки, тег ul или тег li, но по мере изменения имени пользователя меняется его местоположение.Когда я использовал эти вещи, а имя пользователя получало более 6 букв, тогда вся навигационная панель была разбита на две строки.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title></title>
<link href="http://localhost/rentcar/bootstrap-
4.1.1/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<?php
session_start();//session starts here
?> <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark mb-4">
<a class="navbar-brand" href="index.php"><img src="images/logo.jpg"
width="30" height="30"> KY Rentalcar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-
expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="index.php?page=car_price">Cars</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.php?page=selectReview">Review</a>
</li>
<li class="nav-item">
<a class="nav-link" href="map.php">Pickup Station</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.php?page=selectChatView">
Chat</a>
</li>
<?php
if (!isset($_SESSION['username'])){
?>
</ul>
<a href="index.php?page=loginView">
<button class="btn btn-outline-success my-2 my-sm-0">
Login
</button>
</a>
<?php
}else if ($_SESSION['status']=='customer'){
?>
<li class="nav-item">
<a class="nav-link" href="index.php?page=selectMy_pageView">My
Information</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.php?
page=selectMy_reservationView">My Reservation</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.php?page=insertReservationView">New
Reservation</a>
</li>
<ul>
<li class="nav-link disabled" style="color:white;">
<?php
if (isset($_SESSION['username'])){
echo "Welcome, ".$_SESSION['username']."!";
}
?>
<span class="sr-only">(current)</span>
</li>
</ul>
<ul>
<a href="index.php?page=logoutDo">
<button class="btn btn-outline-success my-2 my-sm-0">
Logout
</button>
</a>
</ul>
<?php
}else if ($_SESSION['status']=='admin'){
?>
<li class="nav-item">
<a class="nav-link" href="index.php?page=selectCar_typeView">Car
Type Management</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.php?
page=selectCustomerView">Customer Data</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.php?
page=selectReservationView">Reservation Data</a>
</li>
<ul>
<li class="nav-link disabled" style="color:white;">
<?php
if (isset($_SESSION['username'])){
echo "Welcome, ".$_SESSION['username']."!";
}
?>
<span class="sr-only">(current)</span>
</li>
</ul>
<ul>
<a href="index.php?page=logoutDo">
<button class="btn btn-outline-success my-2 my-sm-0">
Logout
</button>
</a>
</ul>
<?php
}
?>
</div>
</nav>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-
q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script
src="http://localhost/rentcar/bootstrap-4.1.1/assets/js/vendor/jquery-
slim.min.js"><\/script>')</script>
<script src="http://localhost/rentcar/bootstrap-
4.1.1/assets/js/vendor/popper.min.js"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
</script>
<script src="http://localhost/rentcar/bootstrap-
4.1.1/dist/js/bootstrap.min.js"></script>
</body>
</html>