Я пытаюсь написать приложение для реагирования с аутентификацией. Таким образом, некоторые поля на панели навигации будут отображаться только для аутентифицированных пользователей. Для этого у меня есть файл Navbar.jsx и файл SignedInLinks.jsx.
Мой NavBar.jsx:
import React from "react";
import { Link } from "react-router-dom";
import Signedinlinks from "./SignedInLinks";
const Navbar = () => {
return (
<nav className = "navbar navbar-default navbar-dark bg-dark">
<div className = "container">
<Link to = "/" className = "navbar-brand">
RS
</Link>
<Signedinlinks />
</div>
</nav>
);
};
export default Navbar;
Мой SignedInLinks.jsx:
import React from "react";
import { NavLink } from "react-router-dom";
const Signedinlinks = () => {
return (
<ul className = "navbar-nav">
<li className = "nav-item">
<NavLink to = "/">Edit Blogs</NavLink>
</li>
<li className = "nav-item">
<NavLink to = "/">Edit Photographs</NavLink>
</li>
<li className = "nav-item">
<NavLink to = "/" className = "btn btn-primary">
RS
</NavLink>
</li>
</ul>
);
};
export default Signedinlinks;
Я использую следующее для css в index.html:
<link
rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity = "sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin = "anonymous"
/>
И index.css имеет:
body {
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace;
}
Любая идея, почему мои элементы навигационной панели отображаются в вертикальном списке?






Потому что панель навигации не содержит ни одного из классов navbar-expand*. Читать документы...
"Navbars require a wrapping .navbar with .navbar-expand{-sm|-md|-lg|-xl} for responsive collapsing and color scheme classes."
Кроме того, в Bootstrap 4 нет navbar-default.
Это за отзывчивость. вы можете перезаписать "flex-direction: row;" style в вашем компоненте "", который решит проблему.
Просто добавьте таблицу стилей <link> в свой <head>
<link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin = "anonymous">
Привет @Silvi, добро пожаловать в Stack Overflow. Рад, что вы пытаетесь помочь здесь. Я бы посоветовал вам пройтись по вопросу, включая библиотеки, плагины, фреймворк с их версиями, которые использует автор, и постараться быть более ясным в своем ответе, почему и как это можно решить с помощью вашего решения. Спасибо!
Спасибо. Кажется, теперь это работает. Раньше я пытался использовать navbar-expand, но это не изменилось, я думаю, его нужно было обновить один раз.