【发布时间】：2017-07-28 16:37:30
【问题描述】：
我使用 Bootstrap 4 HTML 模板，并希望有一个以 320x480 显示的漂亮表格。
这里，即使添加了 .table-responsive 类，我尝试在该页面中插入的表格也不负责。
你能告诉我我做错了什么吗？
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!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="">
<title>Table</title>
<!-- Bootstrap core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="../css/offcanvas.css" rel="stylesheet">
</head>
<body>
<div id="content">
<div id="display"><br>
<nav class="navbar navbar-toggleable-md fixed-top navbar-inverse bg-inverse">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">MyPage</a>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Link1 <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
<p></p>
<li class="nav-item">
</li>
<li class="nav-item">
</li>
<li class="nav-item">
</li>
</ul>
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div> <!-- class="collapse navbar-collapse" id="navbarsExampleDefault" -->
</nav>
<div class="container">
<div class="row row-offcanvas row-offcanvas-right">
<div class="col-12 col-md-9">
<p class="float-right hidden-md-up">
<button type="button" class="btn btn-primary btn-sm" data-toggle="offcanvas">Toggle nav</button>
</p>
<!-- Encart gris Jumbotron -->
<div class="jumbotron">
<h1>MyTable</h1>
<p>qwerty</p>
</div>
<!-- Tableau sensor -->
<div>
<table class="table table-bordered table-striped table-responsive">
<thead class="thead-inverse">
<tr>
<th scope="row">
[HEADER]
</th>
<th scope="row">
[HEADER]
</th>
<th scope="row">
[HEADER]
</th>
<th scope="row">
[HEADER]
</th>
<th scope="row">
[HEADER]
</th>
<th scope="row">
[HEADER]
</th>
<th scope="row">
[HEADER]
</th>
<th scope="row">
[HEADER]
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
</tr>
<tr>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
</tr>
<tr>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
</tr>
<tr>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
</tr>
<tr>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
</tr>
<tr>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
</tr>
<tr>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
</tr>
<tr>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
</tr>
<tr>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
</tr>
<tr>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
</tr>
</tbody>
</table>
</div>
<!-- fin Tableau sensor -->
<div class="row">
<div class="col-6 col-lg-4">
<img src="..." alt="..." class="img-thumbnail">
<p>1111</p>
<p><a class="btn btn-secondary" href="#" role="button">View Graph »</a></p>
</div><!--/span-->
<div class="col-6 col-lg-4">
<h2>Heading</h2>
<p>2222</p>
<p><a class="btn btn-secondary" href="#" role="button">View Graph »</a></p>
</div><!--/span-->
<div class="col-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
</div><!--/span-->
<div class="col-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
</div><!--/span-->
<div class="col-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
</div><!--/span-->
<div class="col-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
</div><!--/span-->
</div><!--/row-->
</div><!--col-12 col-md-9-->
<div class="col-6 col-md-3 sidebar-offcanvas" id="sidebar">
<div class="list-group">
<a href="#" class="list-group-item active">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
</div>
</div><!--col-6 col-md-3 sidebar-offcanvas-->
</div><!--row row-offcanvas row-offcanvas-right-->
<hr>
<footer>
<p>© Company 2017</p>
</footer>
</div><!--/.container-->
</div> <!-- fin div display -->
</div> <!-- fin div content -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="../js/bootstrap.min.js"></script>
<!-- Responsive table -->
<!-- <script src='http://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js'></script> -->
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../js/ie10-viewport-bug-workaround.js"></script>
<script src="../js/offcanvas.js"></script>
</body>
</html>【问题讨论】：
-
您是否尝试使用引导程序制作响应式表格？因为您应该更清楚问题是什么，并且粘贴整个代码会使它变得非常混乱。尝试使用引导程序制作一个响应式表格，您只需将 col-md 类添加到 div 并将适当的类添加到表格 div
标签： html twitter-bootstrap html-table responsive twitter-bootstrap-4