0

我在反应应用程序中使用引导程序制作了一个侧边栏。代码如下：

import React from 'react';
import './style_sidebar.css';

export default class Sidebar2 extends React.Component {
    render() {
        return (
            <div>
                <ul className="nav flex-column sidebar bg-dark">
                    <h3 className="text-warning mt-3 ml-2">Bootstrap Sidebar</h3>
                    <i className="fa fa-user-circle text-white mt-3 ml-5 pl-4 icon-user" style={{'fontSize': '5em'}}></i>
                    <h4 className="text-warning ml-3 mt-5">Components</h4>
                    <li className="nav-item">
                        <a className="nav-link text-light" href="#a"><i className="fa fa-table fa-lg"></i> Table<hr className="bg-warning" /></a>
                    </li>
                    <li className="nav-item">
                        <a className="nav-link text-light" href="#b"><i className="fa fa-bar-chart fa-lg"></i> Chart<hr className="bg-warning" /></a>
                    </li>
                    <li className="nav-item">
                        <a className="nav-link text-light" href="#c"><i className="fa fa-wpforms fa-lg"></i> Form Elements<hr className="bg-warning" /></a>
                    </li>
                    <li className="nav-item">
                        <a className="nav-link text-light" href="#c"><i className="fa fa-lemon-o fa-lg"></i> Coming Soon<hr className="bg-warning" /></a>
                    </li>
                    <li className="nav-item">
                        <a className="nav-link text-light" href="#c"><i className="fa fa-lemon-o fa-lg"></i> Coming Soon<hr className="bg-warning" /></a>
                    </li>
                </ul>
            </div>
        );
    }
}

CSS部分是：

.sidebar {
    width: max-content;
    height: 100vh;
    padding: 10px;
    position: fixed;
    z-index: -1;
}

.user-icon {
    border: 1px solid;
    border-radius: 40px;
}

/* @media (max-width: 767px) {
    .sidebar {
      width: 100%;
      height: max-content;
    }
} */

@media only screen and (max-width: 600px) {
    .sidebar {
        width: 100%;
        height: max-content;
    }

    h3 {
        align-self: center;
    }  

    .icon-user {
        align-self: center;
        margin-right: 100px;
    }
  }

现在，当我向项目添加更多项目时，ul这些项目将被添加到页面顶部。因此overflow-y:scroll，当项目数量更多时，我曾经制作垂直滚动条。但它不是y-axis滚动条，而是水平滚动条。有任何解决这个问题的方法吗？

我也无法使其响应。我尝试使用media query，但由于我是引导程序的新手，我发现它很难做到。

还有如何为侧边栏制作切换按钮，当屏幕尺寸较小时，侧边栏应该折叠。我想你明白我想说什么。我正在使用最新版本的 Bootstrap。怎么做？

4

1 回答 1

1

您可以使用此 flex-wrap 属性解决滚动问题：

.sidebar {
width: max-content;
height: 100vh;
padding: 10px;
position: fixed;
z-index: -1;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
overflow-y: auto;

}

为了响应，最初隐藏侧边栏并在单击切换按钮时切换它。

于 2020-02-06T17:58:35.417 回答