Как мне исправить мой React Bootstrap Navbar? (Свернуть бренд Навбар) Обновлено - PullRequest
Новая
       49

Как мне исправить мой React Bootstrap Navbar? (Свернуть бренд Навбар) Обновлено

0 голосов
/ 06 апреля 2020

Я создал навигационную панель на своем веб-сайте React. js, используя bootstrap для реакции. В настоящий момент навигационная панель сворачивается в определенный момент, но кнопка моего меню не появляется. Может, кто-нибудь проверит приведенный ниже код и сообщит мне, что мне не хватает / что мне нужно сделать?

Я попытался добавить тумблер, используя пример на учебном сайте bootstrap, однако это не так. кажется, работает, я предполагаю, что чего-то не хватает? Или я делаю что-то не так?

РЕДАКТИРОВАТЬ: я исправил исходную проблему, однако все выравнивание было сброшено, я изменил код ниже на новый код.

  1. Мне нужно, чтобы все на рабочем столе панели навигации было выровнено по правому краю, кроме lo go, которое должно оставаться там, где оно есть.

  2. В режиме просмотра планшета навигационная панель включается автоматически, поэтому всегда отображается для просмотра? Я не хочу этого.

  3. В мобильном представлении мне нужно, чтобы lo go оставался там, где он есть, и чтобы кнопка была выровнена вертикально по центру и вправо.

Заранее спасибо!

Navbar. js:

image

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;
      }
    }

1 Ответ

1 голос
/ 06 апреля 2020

Это пример реакции-бустрапа 

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;

. Также проверьте, есть ли c реакции-бустрапа для отзывчивого поведения. *

Я бы порекомендовал вам сохранять выравнивание с bootstrap классами для выравнивания, не касаясь непосредственно css (вы можете сделать это, но постарайтесь максимально использовать их выравнивания). Посмотрите в документации, как правильно расположить вещи.

...