引导表在模态中不响应
Posted
技术标签:
【中文标题】引导表在模态中不响应【英文标题】：Bootstrap Table not Responsive inside modal 【发布时间】：2021-11-05 17:42:24 【问题描述】：您好，我是引导程序的新手。我想制作一个表格并使其具有响应性，但是我已经创建了一个表格，但是在小型设备中查看时它没有响应。我不确定我错过了什么。有人能帮我吗？谢谢
这是代码：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 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>
<style>
.text-violet
color: #280d5f !important;
.text-light-violet
color: #7a6eaa;
font-size: 14px !important;
.table-title-box > *
padding: 10px 20px;
.image
background-image: url("https://static.thenounproject.com/png/1886158-200.png");
width: 45px;
height: 40px;
display: inline-block;
background-repeat: no-repeat;
.vertical
position: relative;
height: 70px;
.has-text-lblue
color: #1fc7d4;
.pools
width: 99px;
height: 90px;
background-color: transparent;
position: fixed;
right: 9%;
top: 0px;
border: none;
</style>
</head>
<body>
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button
type="button"
class="btn btn-info btn-lg"
data-toggle="modal"
data-target="#myModal"
>
Open Modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
×
</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<table class="table">
<tbody>
<tr>
<td>
<div class="tab-title-box" style="display: table;">
<span
class="tabIcon"
style="vertical-align: middle; padding: 0 10px;"
>
<img
class="image"
src="https://static.thenounproject.com/png/1886158-200.png"
/>
</span>
<span
class="vertical"
style="display: table-cell; margin-right: 20px;"
></span>
<div
class="row"
style="
vertical-align: middle;
display: table-cell;
vertical-align: middle;
padding: 0 10px;
"
>
<div
class="tab-title-text minecraft-font text-violet p-0"
>
Auto First
</div>
<div
class="tab-info text-light-violet m-0 p-0 minecraft-font pt-2"
>
Automatic Viewing
</div>
</div>
</div>
</td>
<td></td>
<td>
<div style="display: inline-block;">
<div class="row m-3 minecraft-font text-violet">
<span
class="text-light-violet m-0 p-0 minecraft-font mb-1"
>Recent View Listing</span
>
3.5 <br />
TEST
</div>
</div>
</td>
<td>
<div style="display: inline-block;">
<div class="row m-3 minecraft-font text-violet">
<span
class="text-light-violet m-0 p-0 minecraft-font mb-1"
>3rd</span
>
Data List
</div>
</div>
</td>
<td>
<div style="display: inline-block;">
<div class="row m-3 minecraft-font text-violet">
<span
class="text-light-violet m-0 p-0 minecraft-font mb-1"
>Total Viewing</span
>
89,687,109 Viewers
</div>
</div>
</td>
<td>
<div style="display: inline-block;">
<div class="row m-3 minecraft-font text-violet">
<span
class="text-light-violet m-0 p-0 minecraft-font mb-1"
>Ends in</span
>
----<br />
</div>
</div>
</td>
<td>
<div style="display: inline-block;">
<div class="row m-3 minecraft-font text-violet">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
class="bi bi-chevron-down"
viewBox="0 0 16 16"
>
<path
fill-rule="evenodd"
d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"
/>
</svg>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-default"
data-dismiss="modal"
>
Close
</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
您可以在此处访问代码：
https://codesandbox.io/s/smoosh-dawn-x0xth?file=/index.html
【问题讨论】：
【参考方案1】：Bootstrap 3 有一个包装类 .table-responsive 用于使表格响应创建水平滚动：
<div class="modal-body">
<div class="table-responsive">
<table class="table">
<!-- table content-->
</table>
</div>
</div>
【讨论】：
以上是关于引导表在模态中不响应的主要内容，如果未能解决你的问题，请参考以下文章
显示在单击获取模式按钮后在 axios 响应中收到的引导模式
关于模态/非模态对话框不响应菜单的UPDATE_COMMAND_UI消息（对对WM_INITMENUPOPUP消息的处理）