css - Datatables lost sidebar

问题描述

I'm using Datatables and Bootstrap, and I'm trying to add a sidebar on the left side of the datatables, actually I did half of the job, infact I created this code:

<head>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" crossorigin="anonymous">
</head>
<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>

if you execute the code in this JSFIDDLE you will get the following result:

Now if you reduce the window dimension you will see this issue:

as you can see the datatables falls on another row, but I need to keep both sidebar + datatables on the same line (even when I reduce the window resolution). How can I do that? Perhaps with the overlaps?

标签： cssbootstrap-4

在引导程序中，一行中有 12 列。在您的情况下，如果您的侧边栏跨越一行的 3 列，那么您必须将其余列分配给您的数据表。

将您<div class="col" id="main">的更改<div class="col-9" id="main">为满足原始的总共 12 列。类前缀类似于.col-或.col-sm- 或.col-md-

.col- means extra-small 
.col-sm- means small
.col-md- means medium
.col-lg- means large
.col-xl- means extra

最大容器宽度：

.col-  = None (auto)    
.col-sm- = 540px    
.col-md- = 720px    
.col-lg- = 960px    
.col-xl- = 1140px

还要检查每个特定原始数据所花费的列数并进行相应计算。

谢谢

css - Datatables lost sidebar

问题描述

解决方案

推荐阅读