Почему мое приложение React показывает навигационную панель начальной загрузки вертикально?

Я пытаюсь написать приложение для реагирования с аутентификацией. Таким образом, некоторые поля на панели навигации будут отображаться только для аутентифицированных пользователей. Для этого у меня есть файл 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;
}

Любая идея, почему мои элементы навигационной панели отображаются в вертикальном списке? Почему мое приложение React показывает навигационную панель начальной загрузки вертикально?

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
0
1 231
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

Потому что панель навигации не содержит ни одного из классов 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.

Спасибо. Кажется, теперь это работает. Раньше я пытался использовать navbar-expand, но это не изменилось, я думаю, его нужно было обновить один раз.

Ron 07.03.2019 19:59

Это за отзывчивость. вы можете перезаписать "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. Рад, что вы пытаетесь помочь здесь. Я бы посоветовал вам пройтись по вопросу, включая библиотеки, плагины, фреймворк с их версиями, которые использует автор, и постараться быть более ясным в своем ответе, почему и как это можно решить с помощью вашего решения. Спасибо!

Jatin Bansal 14.06.2021 12:50

Другие вопросы по теме