reactjs - 为什么我的 React App 垂直显示引导导航栏?
问题描述
我正在尝试编写一个带有身份验证的反应应用程序。因此,导航栏上的某些字段只会显示给经过身份验证的用户。为此,我有一个 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;
我在 index.html 中为 css 使用以下内容:
<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*
类。阅读文档...
“导航栏需要一个带有 .navbar-expand{-sm|-md|-lg|-xl} 的包装 .navbar 用于响应式折叠和配色方案类。”
此外,Bootstrap 4 中也没有navbar-default
。
推荐阅读
- javascript - AJAX Post 调用无数据
- azure-web-app-service - 从 Azure Bot App Service Console 运行 Bot Framework Orchestrator 命令时出现问题
- laravel - laravel 分页,我使用 paginate 不是 simplepaginate 但输出是 simplepaginate
- java - SAML EncryptedAssertion 解密失败 - 解密加密密钥时出错
- r - 如何从 R 中的嵌套 for 循环创建向量?
- c# - 在 C# 控制台应用程序中,您能否将消息的一部分设为一种颜色,而将另一部分设为另一种颜色?
- c++ - 使用visual studio 2019时是否可以只链接项目而不编译?
- javascript - Javascript 无法在 Vivaldi 浏览器中捕获 ESC keyup 事件
- c# - 重载返回任务的方法
- php - 在主题 lib.php 中使用 Moodle get_category_formatted_description 方法 - Moodle 3.11