css - 如何在我的全局 App.css 中设置引导导航栏的样式？

Question

我正在尝试使此导航栏类似于亚马逊导航栏。让搜索栏更长，并且在页面缩小时也是动态的。对于我的生活，我什至无法为文字着色。为此，我使用 App.css 作为全局 css。

总体而言，要解释我在这里所做的事情是正确设置导航栏的样式，但到目前为止我遇到了问题。

<div className="Header">
    <div>
      <Navbar className="color-nav">
        <Navbar.Brand href="/" className="color-nav">
          <i className="fas fa-graduation-cap"></i> Get C's
        </Navbar.Brand>
        <Navbar.Toggle aria-controls="basic-navbar-nav" />
        <Navbar.Collapse id="basic-navbar-nav">
          <Nav className="mr-auto">
            <NavDropdown
              title={this.state.categories}
              id="collasible-nav-dropdown"
              style={{ marginLeft: "14%" }}
            >
              <NavDropdown.Item
                onClick={() => this.setState({ categories: "All" })}
              >
                All
              </NavDropdown.Item>
              <NavDropdown.Divider />
              <NavDropdown.Item
                onClick={() => this.setState({ categories: "Appliances" })}
              >
                Appliances
              </NavDropdown.Item>

              <NavDropdown.Item
                onClick={() => this.setState({ categories: "Books" })}
              >
                Books
              </NavDropdown.Item>

              <NavDropdown.Item
                onClick={() =>
                  this.setState({ categories: "Clothes&Shoes" })
                }
              >
                Clothing & Shoes
              </NavDropdown.Item>

              <NavDropdown.Item
                onClick={() => this.setState({ categories: "Electronics" })}
              >
                Electronics
              </NavDropdown.Item>
              <NavDropdown.Item
                onClick={() => this.setState({ categories: "Services" })}
              >
                Services
              </NavDropdown.Item>
            </NavDropdown>
            <Form
              className="form-center"
              inline
              style={{ width: "100rem" }}
              onSubmit={this.onSearch}
            >
              <FormControl
                type="text"
                placeholder="Search..."
                className="mr-sm-2"
                style={{ margin: "auto auto%", width: "40%" }}
                onChange={e => {
                  this.setState({ queries: e.target.value });
                }}
              />
              <Button variant="outline-info" type="submit">
                Search
              </Button>
            </Form>
          </Nav>
        </Navbar.Collapse>
      </Navbar>
    </div>
  </div>

CSS：

    :root {
  --primary-color: #343a40;
}

/* Reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
/* Navbar */
nav {
  background-color: var(--primary-color);
}

body {
  font-family: "Roboto", sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  background-color: #fff;
  color: #333;
}

标签： cssreactjsreact-bootstrap