html - 使用引导程序将两个表放在 html 中
问题描述
我正在尝试将两块板放在一起,但它一直在彼此下方。我开始学习引导程序,但找不到方法
我的代码:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<table class="table table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
<table class="table table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
结果是这个https://prnt.sc/u3zj9k 我需要这个https://prnt.sc/u3zjx5
有谁知道我怎样才能让桌子看起来像第二张照片?非常感谢大家
解决方案
使用引导网格系统,并且在引导网格系统中引导为不同的屏幕尺寸提供了许多类,您可以从这里了解更多关于引导网格系统的信息, 我确实将此类用于引导 colclass="col-xs-6"
用于超小型设备,它将可用空间划分为两列.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Here is Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-6" style="background-color:lavender;"> <table class="table table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table></div>
<div class="col-xs-6" style="background-color:lavenderblush;"><table class="table table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table></div>
</div>
</div>
</body>
</html>
推荐阅读
- c++ - 同时构建和使用两个不同版本的静态库
- node.js - 使用 React Native 开发移动应用程序
- javascript - 通过另一个过滤器对象过滤对象数组
- c - 我在 C 中实现了双队列(双端队列)。当我调用 deque_from_back() 时程序立即退出
- python - 无法使用 django 模型表单将数据导入我的数据库
- node.js - 使用 node.js 验证 pdf 签名
- java - @ConditionalOnMissingBean 需要使用@Primary 来获取 Bean?
- unit-testing - 嵌套函数的单元测试
- here-api - 在 findsequence2 API 的 timingCompatibility 变量中应该传递什么?
- seal - 使用 SEAL 进行密文旋转的操作