Сделать вертикальную полосу прокрутки в bootstrap navbar, когда есть много предметов - PullRequest
Новая
       50

Сделать вертикальную полосу прокрутки в bootstrap navbar, когда есть много предметов

0 голосов
/ 06 февраля 2020

Я сделал боковую панель, используя bootstrap в приложении реагирования. Код ниже: 

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, мне трудно это сделать.

Также как сделать кнопку переключения для боковой панели, когда размер экрана небольшой, боковая панель должна свернуться. Я думаю, вы поняли, что я пытаюсь сказать. Я использую последнюю версию Bootstrap. Как это сделать?

1 Ответ

0 голосов
/ 06 февраля 2020

Вы можете решить проблему с прокруткой с помощью этого свойства 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;

}

Для быстрого реагирования сначала скройте боковую панель и переключайте ее по нажатию кнопки переключения.

...