Не удается добавить боковую панель рядом с таблицами данных

Question

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

<div class="row">
    <div class="col-12">
        <div class="card">
            <a data-toggle="collapse" href="#fixtures" role="button"
               class="btn btn-rounded hide-btn btn-sm ml-1" aria-expanded="false" aria-controls="fixtures">
                <i class="mdi mdi-view-agenda"></i>
            </a>
            <div class="card-body collapse show rounded-full-margin" id="fixtures">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-3 px-1 bg-dark" id="sticky-sidebar">
                            <div class="py-2 sticky-top">
                                <div class="nav flex-column">
                                    <a href="" class="nav-link">Sidebar</a>
                                    <a href="" class="nav-link">Link</a>
                                    <a href="" class="nav-link">Link</a>
                                    <a href="" class="nav-link">Link</a>
                                    <a href="" class="nav-link">Link</a>
                                    <a href="" class="nav-link">Link</a>
                                </div>
                            </div>
                        </div>

                        <div class="col" id="main">
                            <h4 class="header-title text-center">Matches</h4>
                            <table id="fixtures-datatable" class="table dt-responsive nowrap">
                                <thead>
                                    <tr>
                                        <th class="sorting">League</th>
                                        <th class="sorting">Hour</th>
                                        <th class="sorting text-center">Home</th>
                                        <th class="sorting text-center">Result</th>
                                        <th class="sorting text-center">Away</th>
                                    </tr>
                                </thead>
                                <tbody>
                                        <tr>
                                            <td>BR,Brazil: Serie B</td>

                                            <td>00:15</td>
                                            <td class="text-right">
                                                Guarani
                                                <img src="https://secure.cache.images.core.optasports.com/soccer/teams/150x150/316.png" height="20" />
                                            </td>
                                            <td class="text-center">0 - 2</td>
                                            <td class="text-left">
                                                <img src="https://secure.cache.images.core.optasports.com/soccer/teams/150x150/307.png" height="20" />
                                                Goi&#xE1;s
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>BR,Brazil: Serie B</td>

                                            <td>01:30</td>
                                            <td class="text-right">
                                                S&#xE3;o Bento
                                                <img src="https://secure.cache.images.core.optasports.com/soccer/teams/150x150/6120.png" height="20" />
                                            </td>
                                            <td class="text-center">1 - 0</td>
                                            <td class="text-left">
                                                <img src="https://secure.cache.images.core.optasports.com/soccer/teams/150x150/322.png" height="20" />
                                                Paysandu
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>BR,Brazil: Serie B</td>

                                            <td>01:30</td>
                                            <td class="text-right">
                                                Juventude
                                                <img src="https://secure.cache.images.core.optasports.com/soccer/teams/150x150/314.png" height="20" />
                                            </td>
                                            <td class="text-center">0 - 1</td>
                                            <td class="text-left">
                                                <img src="https://secure.cache.images.core.optasports.com/soccer/teams/150x150/305.png" height="20" />
                                                Crici&#xFA;ma
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>BR,Brazil: Serie B</td>

                                            <td>00:15</td>
                                            <td class="text-right">
                                                Ava&#xED;
                                                <img src="https://secure.cache.images.core.optasports.com/soccer/teams/150x150/330.png" height="20" />
                                            </td>
                                            <td class="text-center">1 - 0</td>
                                            <td class="text-left">
                                                <img src="https://secure.cache.images.core.optasports.com/soccer/teams/150x150/344.png" height="20" />
                                                CRB
                                            </td>
                                        </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <!-- End card-body -->
        </div>
    </div>
</div>

, как вы можете видеть, я обернул sidebar и datatables html внутри row (который также находится внутри container-fluid) для элементов в одной строке.Затем я создал два столбца для создания адаптивного макета, проблема в том, что я получаю следующее:

Как вы можете видеть, боковая панель не 'Идите к левой стороне datatables, но идете наверх, и это неправильно.

Я создал JSFIDDLE здесь .

Спасибо за любую помощь.

Answer 1

Добавьте таблицу стилей в <head>, и кажется, что она работает нормально с левой строкой меню, как и ожидалось.

https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css

<head>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" crossorigin="anonymous">
</head>

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