Блог

Я работаю над Nextjs, для навигационной панели я использовал bootstrap5 по ссылкам CDN, не могу настроить навигационную панель? Это мой компонент Navbar внутри папки компонентов В этом компоненте navbar, я хочу, чтобы страница всех элементов UL была справа, я пробовал mr-auto, а также ml-auto, но все еще не работает.

 import React from 'react'; import Link from 'next/link';  export default function Navbar() {  return (  lt;gt;  lt;nav className="navbar navbar-expand-lg navbar-light bg-light"gt;  lt;div className="container-fluid"gt;  lt;Link href="/"gt;  lt;a className="navbar-brand" gt;Brandlt;/agt;  lt;/Linkgt;  lt;button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"gt;  lt;span className="navbar-toggler-icon"gt;lt;/spangt;  lt;/buttongt;  lt;div className="collapse navbar-collapse" id="navbarNav"gt;  lt;ul className="navbar-nav mr-auto" gt;  lt;li className="nav-item"gt;  lt;Link href="/home"gt;  lt;a className="nav-link active" aria-current="page" gt;Homelt;/agt;  lt;/Linkgt;  lt;/ligt;  lt;li className="nav-item"gt;  lt;Link href="/listing"gt;  lt;a className="nav-link"gt;Listinglt;/agt;  lt;/Linkgt;  lt;/ligt;  lt;li className="nav-item"gt;  lt;Link href="/blogs"gt;  lt;a className="nav-link"gt;Blogslt;/agt;  lt;/Linkgt;  lt;/ligt;  lt;/ulgt;  lt;/divgt;  lt;/divgt;  lt;/navgt;   lt;/gt;  ) }  

он импортируется внутри pages/index.js

 // import Script from 'next/script' import Image from 'next/image' // import styles from '../styles/Home.module.css'; // import Link from 'next/link'; import Navbar from '../components/Navbar'; import Head from 'next/Head';   export default function Home() {  return (  lt;div gt;  lt;Headgt;  lt;titlegt;Brandlt;/titlegt;  lt;meta name="google" content="nositelinkssearchbox" /gt;  lt;/Headgt;  lt;Navbar/gt;  lt;div className="container mt-5 text-center" style={{background: '#555555'}}gt;  lt;h1gt;Website for the indian Krashaklt;/h1gt;  lt;Image src="https://cdn.pixabay.com/photo/2014/09/09/19/07/corn-field-440338_960_720.jpg" width="500" height="300"gt;lt;/Imagegt;  lt;img src="https://cdn.pixabay.com/photo/2020/10/09/20/30/pumpkins-5641482__340.jpg"gt;lt;/imggt; lt;/divgt;  lt;/divgt;  ) }  

и ссылки CDN включены в pages/_app.js

 import '../styles/globals.css'; import Head from 'next/Head';  function MyApp({ Component, pageProps }) {  return (  lt;gt;  lt;Headgt; // Responsive meta tag  lt;meta name="viewport" content="width=device-width, initial-scale=1" /gt;  lt;meta charSet="utf-8" /gt; // bootstrap CDN  lt;titlegt;Brandlt;/titlegt;  lt;script src="https://kit.fontawesome.com/41805cbb76.js" crossorigin="anonymous"gt;lt;/scriptgt;  lt;link  href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"  integrity="sha384-giJF6kkoqNQ00vy HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"  crossorigin="anonymous"  /gt;  lt;script  src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"  integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"  crossorigin="anonymous"gt;lt;/scriptgt;  lt;/Headgt;  lt;Component {...pageProps} /gt;  lt;/gt;  )  }  export default MyApp