html - 从 react-bootstrap 制作侧边栏
问题描述
我正在尝试在这里创建一个像这张图片一样的 Bootstrap 侧边栏。
我查看了 react-bootstrap 和 Twitter Bootstrap 上的所有代码,但我还没有找到如何编写代码。基本上,如果他们在桌面上查看,我希望侧边栏可见,否则隐藏。
当页面上的内容上下滚动时,侧边栏应该保持静止。
解决方案
好的,所以对于那些想要制作侧边栏的人来说,不幸的是,你必须自己制作。
我所做的是以下。
- 请参阅https://github.com/StartBootstrap/startbootstrap-simple-sidebar中的示例
- 在您的应用程序的某处创建 sidebar.js。
import React from "react"; import {Nav} from "react-bootstrap"; import { withRouter } from "react-router"; import '../pages/style/Dashboard.css' const Side = props => { return ( <> <Nav className="col-md-12 d-none d-md-block bg-light sidebar" activeKey="/home" onSelect={selectedKey => alert(`selected ${selectedKey}`)} > <div className="sidebar-sticky"></div> <Nav.Item> <Nav.Link href="/home">Active</Nav.Link> </Nav.Item> <Nav.Item> <Nav.Link eventKey="link-1">Link</Nav.Link> </Nav.Item> <Nav.Item> <Nav.Link eventKey="link-2">Link</Nav.Link> </Nav.Item> <Nav.Item> <Nav.Link eventKey="disabled" disabled> Disabled </Nav.Link> </Nav.Item> </Nav> </> ); }; const Sidebar = withRouter(Side); export default Sidebar
- 我的 Dashboard.css 中有以下内容。
.sidebar { position: fixed; top: 0; bottom: 0; left: 0; min-height: 100vh !important; z-index: 100; padding: 48px 0 0; box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1); } #sidebar-wrapper{ min-height: 100vh !important; width: 100vw; margin-left: -1rem; -webkit-transition: margin .25s ease-out; -moz-transition: margin .25s ease-out; -o-transition: margin .25s ease-out; transition: margin .25s ease-out; } #sidebar-wrapper .sidebar-heading { padding: 0.875rem 1.25rem; font-size: 1.2rem; } #page-content-wrapper { min-width: 0; width: 100%; }
然后最后一步在您希望它显示的文件中执行以下操作
import React from "react";
import {Container, Row, Col, Card, Form, Button } from "react-bootstrap";
import { withRouter } from "react-router";
import Sidebar from "../moduls/sidebar.js";
import './style/Dashboard.css'
const Dash = props => {
return (
<>
<Container fluid>
<Row>
<Col xs={2} id="sidebar-wrapper">
<Sidebar />
</Col>
<Col xs={10} id="page-content-wrapper">
this is a test
</Col>
</Row>
</Container>
</>
);
};
const Dashboard = withRouter(Dash);
export default Dashboard
推荐阅读
- javascript - 如何使用 Laravel 作为 Angular SPA 应用程序的后端?
- ms-access - Relative name to get information from Form in MS Access
- python - Unable to remove accented special characters in a string despite using regex
- excel - Subtract two cells based on multiple criteria
- c# - Dynamicly created panels location distance
- c - 在 C 中使用循环的非重复随机数
- ms-access - MS_Access 报表设计视图非常慢
- swift - How to not cause dark gray color to be transparent removing background from image
- microsoft-graph-calendar - 令人困惑的 Microsoft GraphAPI 限制行为
- aws-lambda - lambda 函数中的跨栈引用