0
我使用Bootstrap 4 HTML模板，並希望在320x480中顯示一個漂亮的表格。我的bootstrap 4表格不會響應
在這裏，我嘗試在該頁面中插入的表格將不會負責，即使.table響應類已被添加。
你能告訴我我做錯了什麼嗎？
<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">
\t \t \t \t
</head>
<body>
\t
\t <div id="content">
\t \t
\t <div id="display"><br>
\t \t
\t
<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>
\t \t \t \t
\t \t <p></p>
\t \t <li class="nav-item">
</li>
\t \t \t \t \t \t
\t \t
\t \t <li class="nav-item">
</li>
\t \t <li class="nav-item">
</li>
\t \t
\t \t </ul>
\t \t
\t \t
\t \t <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>
\t <!-- Encart gris Jumbotron -->
\t <div class="jumbotron">
\t <h1>MyTable</h1>
\t <p>qwerty</p>
\t </div>
\t
\t <!-- Tableau sensor --> \t
\t \t \t <div> \t
\t \t \t <table class="table table-bordered table-striped table-responsive">
\t \t \t \t <thead class="thead-inverse">
\t \t \t \t \t <tr>
\t \t \t \t \t \t <th scope="row">
\t \t \t \t \t \t \t [HEADER]
\t \t \t \t \t \t </th>
\t \t \t \t \t \t <th scope="row">
\t \t \t \t \t \t \t [HEADER]
\t \t \t \t \t \t </th>
\t \t \t \t \t \t <th scope="row">
\t \t \t \t \t \t \t [HEADER]
\t \t \t \t \t \t </th>
\t \t \t \t \t \t <th scope="row">
\t \t \t \t \t \t \t [HEADER]
\t \t \t \t \t \t </th>
\t \t \t \t \t \t <th scope="row">
\t \t \t \t \t \t \t [HEADER]
\t \t \t \t \t \t </th>
\t \t \t \t \t \t <th scope="row">
\t \t \t \t \t \t \t [HEADER]
\t \t \t \t \t \t </th>
\t \t \t \t \t \t <th scope="row">
\t \t \t \t \t \t \t [HEADER]
\t \t \t \t \t \t </th>
\t \t \t \t \t \t <th scope="row">
\t \t \t \t \t \t \t [HEADER]
\t \t \t \t \t \t </th>
\t \t \t \t \t </tr>
\t \t \t \t </thead>
\t \t \t \t
\t \t \t \t
\t \t \t \t <tbody>
\t \t \t \t \t <tr>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t </tr>
\t \t \t \t \t <tr>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t </tr>
\t \t \t \t \t <tr>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t </tr>
\t \t \t \t \t <tr>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t </tr>
\t \t \t \t \t <tr>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t </tr>
\t \t \t \t \t <tr>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t </tr>
\t \t \t \t \t <tr>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t </tr>
\t \t \t \t \t <tr>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t </tr>
\t \t \t \t \t <tr>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t </tr>
\t \t \t \t \t <tr>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t [CONTENT]
\t \t \t \t \t \t </td>
\t \t \t \t \t </tr>
\t \t \t \t </tbody>
\t \t \t </table>
\t \t \t \t </div> \t
<!-- fin Tableau sensor --> \t
\t
\t
\t \t
\t <div class="row"> \t
\t \t
<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-->
\t \t \t
<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-->
\t \t \t
<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-->
\t \t \t
<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-->
\t \t \t
<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-->
\t \t \t
<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-->
\t \t \t
\t </div><!--/row-->
\t \t </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 --> \t
</div> <!-- fin div content --> \t
\t
<!-- 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>
\t
\t <!-- 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>
你嘗試做出響應表引導？因爲你應該更清楚問題是什麼，並且粘貼整個代碼使其非常混亂。嘗試使用bootstrap製作響應表，您只需將col-md類添加到div並將適當的類添加到表格div –