如何在大多数项目位于右侧的引导程序导航中仅将一项居中

Question

我正在尝试将“欢迎：”放在导航栏的中央。我不希望导航栏居中对齐。我希望它像现在一样右对齐，但我只希望“欢迎：”部分位于中间。

这是我迄今为止尝试过的...

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="StyleSheet.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="shortcut icon" href="images/logo.jpg" />
    <!-- Required meta tags -->
    <title>My Title</title>
</head>

<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light ">
        <div class="container-fluid">
            <a class="navbar-brand" href="#"><img class="img-fluid logo" src="images/logo.png"></a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse justify-content-center" id=" collapsibleNavbar">
            <ul class="navbar-nav">

            <li> <p>Welcome<p/></li>
            </ul>

            </div>

            <div class="collapse navbar-collapse justify-content-end" id=" collapsibleNavbar">
                <ul class="navbar-nav">
                
                    <?php
                    session_start();
                    extract($_POST); 

                    function Logout() {
                        session_destroy();
                        session_unset();
                        header('Location: index.php');
                        exit();
                    }

                    if (!isset($_SESSION['user'])) {
                        echo "<li> <a class='nav-link' href='Login.php'>Log In</a></li>";
                    } else {
                        echo "<li> <a class='nav-link' href='?Logout'>Log Out</a></li>";
                    }

                    if (isset($_GET['Logout'])) {
                        Logout($_GET['Logout']);
                    }
                    ?>
                </ul>
            </div>
        </div>
    </nav>

Answer 1

尝试将 col-xs-6 col-md-4 类添加到所有三个部分，以便每个部分的宽度相等 33.3%。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="StyleSheet.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="shortcut icon" href="images/logo.jpg" />
    <!-- Required meta tags -->
    <title>My Title</title>
</head>

<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light ">
        <div class="container-fluid">
            <a class="col-xs-6 col-md-4" href="#"><img class="img-fluid logo " src="images/logo.png"></a>  <!-- Here -->
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse col-xs-6 col-md-4 justify-content-center" id=" collapsibleNavbar"> <!-- Here -->
            <ul class="navbar-nav">

            <li> <p>Welcome<p/></li>
            </ul>

            </div>

            <div class="collapse navbar-collapse col-xs-6 col-md-4 justify-content-end" id=" collapsibleNavbar"> <!-- Here -->
                <ul class="navbar-nav">
                <li>Login</li>
                </ul>
            </div>
        </div>
    </nav>
                </body>
                </html>

P.S：删除了 php 代码只是为了在代码片段中显示上面的预览。请不要忘记添加。

如何在大多数项目位于右侧的引导程序导航中仅将一项居中

How to center only one item in boostrap nav where most items are on the right

html

css

bootstrap-5