[英]I can't make the nav bar and search bar shrink with the browser for bootstrap react
我的主要目标是在浏览器缩小时缩小搜索栏。我实现样式的方式有问题,因为它没有缩小。 每当我尝试它时,它仍然会退出页面。
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;
}
查看您的 Codesandbox,当 Bootstrap 未加载时,在为其添加 CDN 引用后,通过以下小改动,导航栏开始工作。
现在是可选的,您可以在 Navbar 和底部的相关 div 之前跟踪这些标签中的任何错误样式,但这些更改将是可选的更改,具体取决于整体站点/设计要求。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.