我正在使用 Datatables 和 Bootstrap，我试图在 datatables 的左侧添加一个侧边栏，实际上我做了一半的工作，事实上我创建了这段代码:
<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ás
</td>
</tr>
<tr>
<td>BR,Brazil: Serie B</td>
<td>01:30</td>
<td class="text-right">
Sã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úma
</td>
</tr>
<tr>
<td>BR,Brazil: Serie B</td>
<td>00:15</td>
<td class="text-right">
Avaí
<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>
如果你执行这个 JSFIDDLE 中的代码你会得到以下结果:
现在，如果您减小窗口尺寸，您将看到此问题:
如您所见，datatables 位于另一行，但我需要将侧边栏和数据表保持在同一行(即使我降低了窗口分辨率)。我怎样才能做到这一点？也许有重叠？
最佳答案
在 bootstrap 中，一行有 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
同时检查每个特定 raw 花费的列数并进行相应计算。
谢谢
关于css - 数据表丢失侧边栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52496690/