導航欄上的按鈕未在reactJS中對齊

我正在使用 bootstrap 5 中的導航欄。我遇到了 UI 問題。

我有什么？

這是我目前擁有的導航欄。

我想要什么？

我想將導航欄按鈕（登錄和注冊）與右端對齊。

import React from "react";
import { Link, useNavigate } from "react-router-dom";

const Navbar = (props) => {
  let navigate = useNavigate();

  const handleLogout = () => {
    localStorage.removeItem("token");
    console.log("hello");
    navigate("/login");
    props.showAlert("User Logged Out succesfully! ", "info");
    
  };

  return (
    <>
      <nav className="navbar navbar-expand-lg navbar-dark bg-dark">
        <div className="container-fluid">
          <Link className="navbar-brand" to="/">
            Navbar
          </Link>
          <button
            className="navbar-toggler"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#navbarNav"
            aria-controls="navbarNav"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span className="navbar-toggler-icon"></span>
          </button>
          <div className="collapse navbar-collapse" id="navbarNav">
            <ul className="navbar-nav">
              <li className="nav-item">
                <Link className="nav-link active" aria-current="page" to="/">
                  Home
                </Link>
              </li>
              <li className="nav-item">
                <Link className="nav-link" to="/about">
                  About
                </Link>
              </li>
            </ul>

            {!localStorage.getItem("token") ? (
              <form className="d-flex">
                <Link
                  className="btn btn-outline-success mx-2"
                  to="/signup"
                  role="button"
                >
                  SignUp
                </Link>
                <Link
                  className="btn btn-outline-success"
                  to="/login"
                  role="button"
                >
                  Login
                </Link>
              </form>
            ) : (
              <form className="d-flex">
                <button
                  className="btn btn-outline-success mx-2"
                  onClick={handleLogout}
                >
                  LogOut
                </button>
              </form>
            )}
          </div>
        </div>
      </nav>
    </>
  );
};

export default Navbar;

我嘗試了很多次嘗試，但仍然無法正常作業。我也在使用引導程式內置類。

uj5u.com熱心網友回復：

你只需要添加一個給定的me-auto類<ul><ul >

import React from "react";
import { Link, useNavigate } from "react-router-dom";

const Navbar = (props) => {
  let navigate = useNavigate();

  const handleLogout = () => {
    localStorage.removeItem("token");
    console.log("hello");
    navigate("/login");
    props.showAlert("User Logged Out succesfully! ", "info");
    
  };

  return (
    <>
      <nav className="navbar navbar-expand-lg navbar-dark bg-dark">
        <div className="container-fluid">
          <Link className="navbar-brand" to="/">
            Navbar
          </Link>
          <button
            className="navbar-toggler"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#navbarNav"
            aria-controls="navbarNav"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span className="navbar-toggler-icon"></span>
          </button>
          <div className="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav me-auto"> 
              <li className="nav-item">
                <Link className="nav-link active" aria-current="page" to="/">
                  Home
                </Link>
              </li>
              <li className="nav-item">
                <Link className="nav-link" to="/about">
                  About
                </Link>
              </li>
            </ul>

            {!localStorage.getItem("token") ? (
              <form className="d-flex">
                <Link
                  className="btn btn-outline-success mx-2"
                  to="/signup"
                  role="button"
                >
                  SignUp
                </Link>
                <Link
                  className="btn btn-outline-success"
                  to="/login"
                  role="button"
                >
                  Login
                </Link>
              </form>
            ) : (
              <form className="d-flex">
                <button
                  className="btn btn-outline-success mx-2"
                  onClick={handleLogout}
                >
                  LogOut
                </button>
              </form>
            )}
          </div>
        </div>
      </nav>
    </>
  );
};

export default Navbar;

uj5u.com熱心網友回復：

只需要添加me-auto在<ul>這樣的：

<ul className="navbar-nav me-auto">

uj5u.com熱心網友回復：

嘗試使用

<form className="d-flex ml-auto">

標籤：javascript html css 反应 bootstrap-4

上一篇：JQuery-使用邏輯條件更改className

下一篇：如何使用jquery或javascript從asp.netcoremvc的下拉串列中自動選擇值？