时间戳

首页 > 解决方案 > 如何修复我的 React Bootstrap 导航栏？（导航栏品牌折叠）已更新

html - 如何修复我的 React Bootstrap 导航栏？（导航栏品牌折叠）已更新

问题描述

我在我的 React.js 网站中创建了一个导航栏，使用引导程序进行反应。导航栏当前在某个点折叠，但是我的菜单按钮没有出现。请有人检查下面的代码并让我知道我缺少/需要做什么？

我尝试使用引导教程站点上的示例添加切换，但它似乎不起作用，我假设缺少某些东西？或者我做错了什么？

编辑：我已经修复了原始问题，但是所有对齐都被取消了，我已将下面的代码更改为新代码。

  1. 我需要导航栏桌面视图上的所有内容都正确对齐，除了应该保留在原处的徽标。

  2. 在平板电脑视图中，导航栏会自动打开以便始终可见？我不想要这个。

  3. 在移动视图中，我需要徽标保持原位，并且按钮垂直居中并向右对齐。

提前致谢！

导航栏.js：

import Navbar from 'react-bootstrap/Navbar';
import Nav from 'react-bootstrap/Nav';
import Button from 'react-bootstrap/Button';
import {
  Link
} from 'react-router-dom';

class NavBar extends React.Component {
  render() {
    return (
      <Navbar collapseOnSelect expand="lg" className="custom-nav-bg fixed-top">
        <Navbar.Brand href="#home">
        <Link to="/home"><img className="custom-nav-logo"
            src="logohero.png"
            alt="StatHero Logo"
            width="105px"
            height="50px"
          /></Link>
        </Navbar.Brand>
        <Navbar.Toggle aria-controls="responsive-navbar-nav" className="navbar-toggler-css" />
        <Navbar.Collapse id="responsive-navbar-nav">
          <Nav className="align-nav">
            <Nav.Link className="custom-nav-text" href="#about">
            <Link to="/about">ABOUT</Link>
            </Nav.Link>

            <Nav.Link className="custom-nav-text" href="#stats">
            <Link to="/stats">STATS</Link>
            </Nav.Link>

            <Nav.Link className="custom-nav-text" href="#faqs">
            <Link to="/faq">FAQS</Link>
            </Nav.Link>

            <Nav.Link className="custom-nav-text" href="#contact">
            <Link to="/contact">CONTACT</Link>
            </Nav.Link>

            <Nav.Link className="custom-nav-text" href="#signup">
              <Link to="/signup"><Button className="custom-nav-button">SIGN UP</Button></Link>
            </Nav.Link>

            <Nav.Link className="custom-nav-text" href="#login">
            <Link to="/login">LOGIN</Link>
            </Nav.Link>

          </Nav>
        </Navbar.Collapse>
    </Navbar>
    )
  }
}
export default NavBar;

导航栏 CSS（对于某些上下文）：

  background-color: red ! important;
  display: flex;
  align-items: flex-end;
}

.align-nav {
  display: flex;
  align-content: flex-end;
}

.custom-nav-bg {
  max-width: 100%;
  padding-right: 50px;
  padding-left: 60px;

  border-radius: 0px;
  background-color: #132A42;
}

.custom-nav-logo {
  height: 100%;
}

a.custom-nav-text:hover {
  color: #00DF8D ! important;

  font-family: 'Assistant', sans-serif ! important;
}

a.custom-nav-button:hover {
  color: #00DF8D ! important;

  font-family: 'Assistant', sans-serif ! important;
}

.custom-nav-text {
  max-width: 100%;
  padding-top:10px ! important;
  padding-right:20px ! important;
  padding-bottom:10px ! important;
  padding-left:20px ! important;

  color: white ! important;

  font-family: 'Assistant', sans-serif;
  font-size: 20px;
  font-weight: 600;
}

.custom-nav-button {
  padding-right: 15px;
  padding-left: 15px;

  border-color: #00DF8D;
  border-radius: 10px;
  background-color: #00DF8D;

  font-size: 20px;
  font-weight: 600;
  }

  @media only screen and (max-width: 768px) {
    .custom-nav-text {
      max-width: 100%;
      padding-top:10px ! important;
      padding-right:10px ! important;
      padding-bottom:10px ! important;
      padding-left:10px ! important;

      font-size: 15px;
    }
    .custom-nav-logo {
      align-items: flex-start;
      justify-content: flex-start;
    }
    .custom-nav-bg {
      padding-left: 0px;
      padding-right: 0px;
      display: block;
    }
  }

  @media only screen and (max-width: 768px) {
    .custom-nav-button {
      padding-right: 10px;
      padding-left: 10px;

      border-color: #00DF8D;
      border-radius: 5px;
      background-color: #00DF8D;

      font-size: 15px;
      }
    }

标签： htmlcssreactjsnavbarreact-bootstrap

解决方案

这是来自 react-boostrap 的示例

import React from "react";
import{ Navbar, Nav, Button, NavDropdown}  from "react-bootstrap";

class NavBar extends React.Component {
  render() {
    return (
<Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
  <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
  <Navbar.Toggle aria-controls="responsive-navbar-nav" />
  <Navbar.Collapse id="responsive-navbar-nav">
    <Nav className="mr-auto">
      <Nav.Link href="#features">Features</Nav.Link>
      <Nav.Link href="#pricing">Pricing</Nav.Link>
      <NavDropdown title="Dropdown" id="collasible-nav-dropdown">
        <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
        <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
        <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
        <NavDropdown.Divider />
        <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
      </NavDropdown>
    </Nav>
    <Nav>
      <Nav.Link href="#deets">More deets</Nav.Link>
      <Nav.Link eventKey={2} href="#memes">
        Dank memes
      </Nav.Link>
    </Nav>
  </Navbar.Collapse>
</Navbar>
    );
  }
}
export default NavBar;

还要检查 react-boostrap 的文档以了解响应行为 https://react-bootstrap.github.io/components/navbar/#navbars-mobile-friendly

我建议您与引导类保持对齐以进行对齐，而不直接接触 css（您可以这样做，但尝试尽可能多地使用它们的对齐方式）。查看有关如何定位事物的文档。

推荐阅读