Question

当我缩小浏览器的大小时，会得到这个

如您所见，三行符号（我不知道叫什么）不可见。如何将其颜色变成白色？

我还希望登录按钮位于菜单项下方。这是我的代码

import React, { Component } from 'react';
import {
  Navbar,
  NavbarBrand,
  Nav,
  NavbarToggler,
  Collapse,
  NavItem,
  Jumbotron,
  Button,
  Modal,
  ModalHeader,
  ModalBody,
  Form,
  FormGroup,
  Input,
  Label,
} from 'reactstrap';
import { NavLink } from 'react-router-dom';

class Header extends Component {
  constructor(props) {
    super(props);

    this.state = {
      isNavOpen: false,
      isModalOpen: false,
    };

    this.toggleModal = this.toggleModal.bind(this);
    this.toggleNav = this.toggleNav.bind(this);
    this.handleLogin = this.handleLogin.bind(this);
  }

  toggleNav() {
    this.setState({
      isNavOpen: !this.state.isNavOpen,
    });
  }

  toggleModal() {
    this.setState({
      isModalOpen: !this.state.isModalOpen,
    });
  }

  handleLogin(event) {
    this.toggleModal();
    alert(
      'Username: ' +
        this.username.value +
        ' Password: ' +
        this.password.value +
        ' Remember: ' +
        this.remember.checked
    );
    event.preventDefault();
  }

  render() {
    return (
      <div>
        <Navbar style={{ backgroundColor: '#378248' }} expand='md'>
          <Modal isOpen={this.state.isModalOpen} toggle={this.toggleModal}>
            <ModalHeader toggle={this.toggleModal}>Login</ModalHeader>
            <ModalBody>
              <Form onSubmit={this.handleLogin}>
                <FormGroup>
                  <Label htmlFor='username'>Username</Label>
                  <Input
                    type='text'
                    id='username'
                    name='username'
                    innerRef={(input) => (this.username = input)}
                  />
                </FormGroup>
                <FormGroup>
                  <Label htmlFor='password'>Password</Label>
                  <Input
                    type='password'
                    id='password'
                    name='password'
                    innerRef={(input) => (this.password = input)}
                  />
                </FormGroup>
                <FormGroup check>
                  <Label check>
                    <Input
                      type='checkbox'
                      name='remember'
                      innerRef={(input) => (this.remember = input)}
                    />
                    Remember me
                  </Label>
                </FormGroup>
                <Button type='submit' value='submit' color='primary'>
                  Login
                </Button>
              </Form>
            </ModalBody>
          </Modal>
          <div className='container'>
            <NavbarToggler onClick={this.toggleNav} />
            <Collapse isOpen={this.state.isNavOpen} navbar>
              <Nav navbar>
                <NavItem>
                  <NavLink
                    style={{ color: '#fff' }}
                    className='nav-link'
                    to='/home'
                  >
                    <span className='fa fa-home fa-lg'></span> Home
                  </NavLink>
                </NavItem>

                <NavItem>
                  <NavLink
                    style={{ color: '#fff' }}
                    className='nav-link'
                    to='/gallery'
                  >
                    <span className='fa fa-list fa-lg'></span> Gallery
                  </NavLink>
                </NavItem>
                <NavItem>
                  <NavLink
                    style={{ color: '#fff' }}
                    className='nav-link'
                    to='/contactus'
                  >
                    <span className='fa fa-address-card fa-lg'></span> Contact
                    Us
                  </NavLink>
                </NavItem>
              </Nav>
            </Collapse>
            <Nav className='ml-auto' navbar>
              <NavItem>
                <Button
                  outline
                  style={{ backgroundColor: '#fff' }}
                  onClick={this.toggleModal}
                >
                  <span className='fa fa-sign-in fa-lg'></span> Login
                </Button>
              </NavItem>
            </Nav>
          </div>
        </Navbar>
        <Jumbotron style={{ backgroundColor: '#5b9153' }}>
          <div className='container'>
            <div className='row row-header'>
              <div className='col-12 col-sm-6'>
                <h1>I Love Aristi</h1>
                <p>A place built for God!</p>
              </div>
            </div>
          </div>
        </Jumbotron>
      </div>
    );
  }
}

export default Header;

有什么想法吗？

谢谢，西奥。

Answer 1

您需要在CSS文件上自定义.navbar-toggler和.navbar-toggler-icon，因为您没有为navbar（例如navbar-light）使用Bootstrap主题，这就是为什么汉堡按钮无法正确显示-因为其CSS定义主要取决于您的导航栏所使用的Bootstrap主题。

为此，您可以使用类似以下内容的

：

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.navbar-toggler {
  border: 1px solid rgba(255, 255, 255);
}

对于登录Button，请将其放在Collapse组件中，以便它位于可折叠/可扩展导航栏的组中。

<Collapse isOpen={this.state.isNavOpen} navbar>
  <Nav navbar className="w-100">
    ...
    <NavItem className="d-md-block ml-md-auto">
      <Button
        outline
        style={{ backgroundColor: "#fff" }}
        onClick={this.toggleModal}
      >
        <span className="fa fa-sign-in fa-lg"></span> Login
      </Button>
    </NavItem>
  </Nav>
</Collapse>

看看我的摘要中className和Nav的{{1}}。 NavItem可以使w-100占据整个空间。 Nav和d-md-block在那里，因此您的“登录”按钮在中型设备上将被向右推，而在小型设备上将被向左推。

更改reactstrap导航栏的颜色和属性

1 个答案: