#css #reactjs #next.js #bootstrap-5
Вопрос:
Я работаю над 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