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 here。

感谢您的帮助。

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>

如果您检查控制台，则会发现您提供的链接中没有显示引导样式。

无法在数据表附近添加侧边栏

1 个答案: