Как сделать складной вертикальный столбик? - PullRequest
0 голосов
/ 27 января 2019

Я работаю над сайтом, используя Bootstrap 4, и у меня есть боковая панель с некоторыми опциями меню для страницы администратора.На панели таблеток у меня есть один элемент навигации, на который я хочу щелкнуть, чтобы он раскрылся и дал мне еще несколько опций на панели таблеток.

Это то, что у меня есть сейчас для отображения страницы:

enter image description here

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

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

Вот то, что у меня есть, на данный момент, код мудрый:

  <div class="col-lg-2">
            <ul id="adminPills"class="nav flex-column nav-pills bg-dark">
                <li class="nav-item"><a class="nav-link active text-muted" data-toggle="tab" href="#dashboard"><span class="fas fa-chart-line"></span>   Dashboard</a></li>
                <li class="nav-item"><a class="nav-link text-muted" data-toggle="tab" href="#permissions"><i class="fas fa-user-alt"></i>    Permissions</a></li>                
                <li class="nav-item collapse"><a class="nav-link text-muted " data-toggle="tab" href="#permissions"><i class="fas fa-database"></i>    Manual Data Entry</a>
                    <ul class="nav flex-column nav-pills bg-dark">
                        <div style="padding-left:0px;">
                        <li class="nav-item"><a class="nav-link text-muted" href="#">Historical Data</a></li>
                        <li class="nav-item"><a class="nav-link text-muted" href="#">Company News</a></li>
                        <li class="nav-item"><a class="nav-link text-muted" href="#">Financial Report</a></li>
                        </div>  
                    </ul>
                </li>
                <li class="nav-item"><a class="nav-link text-muted" data-toggle="tab" href="#email"><i class="fas fa-mail-bulk"></i>    Send Email to Users</a></li>
            </ul>
        </div>

Как бы я отредактировал этот код, чтобы сделать это возможным?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...