Я не могу заставить панель навигации и панель поиска сжаться браузером для bootstrap реакции - PullRequest
Новая
       4

Я не могу заставить панель навигации и панель поиска сжаться браузером для bootstrap реакции

0 голосов
/ 31 марта 2020

Моя главная цель - уменьшить панель поиска, когда браузер сокращается. Их проблема в том, как я реализовал свой стиль, потому что он не уменьшается. Он по-прежнему выходит на страницу всякий раз, когда я пытаюсь это сделать. 

return (
  <div className="Header">
    <div>
      <Navbar className="page-head container-fluid">
        <div className="logo">
          <Navbar.Brand href="/" className="text-light">
            <i className="fas fa-graduation-cap"></i> Get C's
          </Navbar.Brand>
        </div>
        <Navbar.Toggle
          aria-controls="basic-navbar-nav"
          className="text-light"
        />
        <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="page-head search-form "
              // inline
              // style={{ margin: "auto" }}
              onSubmit={this.onSearch}
            >
              <FormControl
                type="text"
                placeholder="Search..."
                className=" mr-sm-2 search-box"
                // style={{ margin: "auto", width: "90%" }}
                onChange={e => {
                  this.setState({ queries: e.target.value });
                }}
              />
              <Button variant="outline-info search-button" type="submit">
                <i className="fas fa-search"></i>
              </Button>
            </Form>
          </Nav>
        </Navbar.Collapse>
      </Navbar>
    </div>
  </div>
);

CSS Я реализовал это до сих пор. Я пытался использовать flex-grow, но это не имело никакого эффекта. Моя самая большая проблема - это ширина, я не могу понять, как это работает правильно. Панель навигации не покрывает всю ширину браузера. 

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

/* Reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
/* Navbar */
nav {
  background-color: var(--primary-color);
  color: white;
}
.navbar-light .navbar-nav .nav-link {
  color: white;
}
.navbar-light .navbar-nav .nav-link:hover {
  color: gray;
}
/* Navbar header */
.page-head {
  display: flex;
  align-items: center;
}
.log {
  flex-shrink: 0;
}
/* Search bar */
.search-form {
  margin: 0 1rem;
  width: 80rem;
  flex-grow: 1;
  min-width: 18rem;
}

.search-box {
  width: 100%;
  padding: 0.4rem;
}
.search-button {
  display: flex;
  margin: 0;
}

1 Ответ

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

Глядя на ваш Codesandbox, и пока Bootstrap не загружался, после добавления ссылки на CDN для него со следующими небольшими изменениями Navbar начал работать.

  • Обновите Navbar className = "page-head container-liquid" до: Navbar bg = "light" expand = "lg"
    // Вы, конечно, можете использовать: xs, sm, md , lg в зависимости от того, когда вы хотите, чтобы Navbar расширялся ..

Теперь необязательно, вы можете и следуйте до Navbar и связанных с ним div в нижней части, чтобы учесть любые ошибочные стили в этих тегах, но эти изменения будут необязательные изменения в зависимости от общих требований сайта / дизайна.

...