Html 具有bootstrap4网格问题的电子布局
我正在使用Html 具有bootstrap4网格问题的电子布局,html,css,bootstrap-4,electron,Html,Css,Bootstrap 4,Electron,我正在使用bootstrap4网格创建electron布局，并成功创建了我想要的内容，但当我用数据填充每个网格时，我遇到了问题，它变得很混乱 我正在使用此方法创建我的布局： 布局我想要的是这样的： 这就是我的代码所得到的： 但如果我填写更多数据，结果如下所示： 这是我的代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8">
bootstrapelectron布局布局布局<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
<style type="text/css">
.full-height {
height: 100vh;
overflow: auto;
}
</style>
<title>Test 123</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 bg-light full-height">
<div class="row">
<div class="col" style="height:50vh;">
<h2>Section title 1</h2>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<div class="w-100"></div>
<div class="col" style="height:50vh;">
<h2>Section title 2</h2>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="col-sm-4 bg-light full-height">
<h2>Section title3</h2>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>1,001</td>
<td>Lorem</td>
<td>ipsum</td>
<td>dolor</td>
<td>sit</td>
</tr>
<tr>
<td>1,001</td>
<td>Lorem</td>
<td>ipsum</td>
<td>dolor</td>
<td>sit</td>
</tr>
<tr>
<td>1,001</td>
<td>Lorem</td>
<td>ipsum</td>
<td>dolor</td>
<td>sit</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-sm-5 bg-light full-height">
<div class="row">
<div class="col" style="height:50vh;">
<h2>Section title 4</h2>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<div class="w-100"></div>
<div class="col" style="height:50vh;">
<video width="95%" height="95%" controls><source src="video.mp4" type="video/mp4"></video>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="renderer.js"></script>
</html>
.全高{
高度：100vh；
溢出：自动；
}
测试123
第1节标题
#
标题
标题
标题
标题
第2节标题
#
标题
标题
标题
标题
第3节标题
#
标题
标题
标题
标题
1,001
洛勒姆
乱数假文
多洛
坐
1,001
洛勒姆
乱数假文
多洛
坐
1,001
洛勒姆
乱数假文
多洛
坐
第4节标题
#
标题
标题
标题
标题
是否有可能使每个网格状的自我容器都有自己的区域？我会为您的div添加包装。现在，您的内容不应溢出其包装器。这应该有用……） 例如：
…内容
divdiv溢出：自动