bootstrap-4 - 数据表和 bootstrap4 - 数据表解决了网格问题
问题描述
我试图让数据表只显示在 bs4 网格内，但它似乎总是超出定义的网格。这是一个例子。您可以看到我有一个 class="container-fluid"，然后是 col-md-2（左侧菜单）和 col-md-10（主要内容并显示数据表）。由于某种原因，数据表向右延伸超过 col-md-10。任何建议表示赞赏。
我试图将我的 html 压缩如下。这里是;
<!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="">
<style>
body{margin-top:50px;}
.accordion{padding-top: 5px;}
.cardmargin{margin-bottom: 5px;}
.panel-body { padding:5px; }
.panel-body table tr td { padding-left: 15px }
.panel-body .table {margin-bottom: 0px; }
.fas { margin-right:10px; }
</style>
<link rel="icon" href="/images/favicon.ico">
<!-- CSS Admin / post_index -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.24/css/dataTables.bootstrap4.min.css" crossorigin="anonymous"
<link rel="stylesheet" href="https://development.example.com/assets/admin/post/css/post_index.css" crossorigin="anonymous">
<title>Blogs!Admin Area</title>
<!-- font awesome for bs4 -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<!-- temp -->
<link rel="canonical" href="https://getbootstrap.com/docs/4.0/examples/jumbotron/">
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css" crossorigin="anonymous">
<!-- Custom styles for this template -->
<link href="/assets/css/jumbotron.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="/">example.com</a>
<button class="navbar-toggler" 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>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <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>
<!--logged in menu -->
<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">Welcome richard!</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="/Profile/profile_read">Profile</a>
<a class="dropdown-item" href="/Login/login_delete">Logout</a>
</div>
</li>
<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">Admin Menu</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="/Admin/users/index">Users</a>
<a class="dropdown-item" href="/Login/login_delete">Logout</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<main role="main">
<!-- show any flash messages -->
<div class="container-fluid">
<div class="row">
<div class="col-sm-2 col-md-2">
<!-- accordion sidebar here -->
<!-- accordion side menu -->
<div id="accordion" class="accordion">
<!-- blogs // collapseTwo-->
<div class="card cardmargin">
<div class="card-header">
<a class="collapsed card-link" data-toggle="collapse" href="#collapseTwo">
Blogs
</a>
</div>
<div id="collapseTwo" class="collapse show" data-parent="#accordion">
<div class="card-body">
<div class="panel-body">
<table class="table">
<tr>
<td>
<span class="fas fa-pencil-alt"></span><a href="/admin/post/post_index">Posts Index</a>
</td>
</tr>
<tr>
<td>
<span class="fas fa-newspaper"></span><a href="/admin/post/post_create">New Post</a>
</td>
</tr>
<tr>
<td>
<span class="fas fa-paper-plane"></span><a href="/admin/category/category_index">Categories</a>
</td>
</tr>
<tr>
<td>
<span class="fas fa-comments"></span><a href="/admin/category/category_create">New Category</a>
<span class="badge badge-dark">42</span>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<!-- users // collapseThree-->
<div class="card cardmargin">
<div class="card-header">
<a class="collapsed card-link" data-toggle="collapse" href="#collapseThree">
<span class="fas fa-users"></span>Users</a>
</div>
<div id="collapseThree" class="collapse " data-parent="#accordion">
<div class="card-body">
<div class="panel-body">
<table class="table">
<tr>
<td>
<span class="fas fa-pencil-alt"></span><a href="/Admin/users/index">List</a>
</td>
</tr>
<tr>
<td>
<span class="fas fa-newspaper"></span><a href="/Admin/users/user_create">New User</a>
</td>
</tr>
<tr>
<td>
<span class="fas fa-paper-plane"></span><a href="http://www.jquery2dotnet.com">Login Attempts</a>
</td>
</tr>
<tr>
<td>
<span class="fas fa-comments"></span><a href="http://www.jquery2dotnet.com">other</a>
<span class="badge badge-dark">42</span>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div> </div>
<!-- content -->
<div class="col-sm-10 col-md-10">
<!-- show errors -->
<!-- show posts intro -->
<div class="row">
<h1>Posts</h1>
</div>
<!-- list posts -->
<div class="row">
<table id="post_index" class="table table-striped table-bordered" >
<thead>
<tr>
<th>Category</th>
<th>Author</th>
<th>Title / Post</th>
<th>Published?</th>
<th>Created</th>
<th>Updated</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<!-- category -->
<td>
<a href="https://development.example.com/admin/category/index/93">
Cargo </a>
</td>
<!-- author -->
<td>
<a href="https://development.example.com/admin/post/post_read/48">
Mr John </a>
</td>
<!-- title / post -->
<td>
<h6> This is the last post</h6></br>
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.… <a href="https://development.example.com/admin/post/post_read/242"> Read more... </a>
</td>
<!-- is_published -->
<td>
<a href="/admin/post/toggle_post_is_published/242" class="btn btn-danger btn-sm" data-toggle="tooltip" data-placement="top" title="Not Published" onclick="return confirm('Are you sure you want to publish the post?')"> <i class="fas fa-frown"></i></a>
</td>
<!-- post_created_at -->
<td>
2021-05-03 10:45:11 </td>
<!-- post_updated_at -->
<td>
2021-05-03 10:45:11 </td>
<!-- navigation -->
<td nowrap>
<a href="https://development.example.com/admin/post/post_read/242">
<span class="fas fa-book-reader"> </span>
</a>
<a href="https://development.example.com/admin/post/post_update/242">
<span class="fas fa-edit"> </span>
</a>
<a href="#" data-toggle="tooltip" title="Delete Post">
<a href="https://development.example.com/admin/post/post_delete/242" onclick="return confirm('Do you want delete this post?')"><span class="fas fa-trash-alt"></span> </a> </a>
</td>
</tr>
</tbody>
</table>
</div>
<!-- no posts -->
</div>
<!-- end content -->
</div><!--end row -->
</div> <!-- end container -->
<hr>
</main>
<footer class="container">
<p>© example.com 1999-2021 || Phone: +81-555-5555-5555 || Fax: +81-555-5555-5555|| Email: info@example.com </p>
</footer>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.24/datatables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.24/js/dataTables.bootstrap4.min.js"></script>
<!-- load additional scripts here -->
<!-- Scripts Admin / post_index -->
<script src="https://development.example.com/assets/admin/post/js/post_index.js"></script>
</body>
</html>
解决方案
推荐阅读
- node.js - 从终端按顺序执行多个 .js 文件
- ruby-on-rails - 如何在 Rails 6 应用程序中包含来自旧版 Gem 的 Javascript 和 CSS？
- firebase - Firebase Cloud Function 部署失败
- javascript - 如何以适当的方式使用 $(.class) ？
- javascript - 使用相对单位的响应式段落
- python - 如何解决以下sql语法错误
- python - 为什么openpyxl不断将“正常”公式更改为数组公式
- google-analytics - 每个 page_url 的 Google 分析视图，而不是每个标题的视图
- vb.net - 有任何字体不会改变文本 len
- mysql - 关键字“order”附近的 SQL 语法不正确