我一直在从一些视频中学习如何使用 bootstrap4，并且我正在使用网格系统，但由于某种原因它没有在中间对齐，这是我的代码。有什么我可以改变的，或者可能与视频仍然使用 bootstrap4 的 alpha 版本相关的东西。
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap-grid.min.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="main.css">
</head>
<body class="signin-body">
<div class="container signin-container">
<div class="row">
<div class="col"></div>
<div class="col-8">
<div class="card signin-card" style="width: 27rem;">
<div class="card-body">
<img src="assets/DevslopesLogo.png" class="img-fluid signin-img" alt="Logo here">
<form class="signin-form">
<div class="form-group">
<input type="email" class="form-control" id="emailInput" aria-describedby="emailHelp" placeholder="Enter email">
</div>
<div class="form-group">
<input type="password" class="form-control" id="passwordInput" placeholder="Password">
</div>
<button type="button" class="btn signin-btn btn-lg">Sign In</button>
<div class="form-check mb-2 mr-sm-2">
<input class="form-check-input" type="checkbox" id="inlineFormCheck">
<label class="form-check-label" for="inlineFormCheck">
Remember me<a href="#"> Need Help?</a>
</label>
</div>
<p class="card-text">Some quick example text .</p>
</div>
</div>
<a href="#" class="create-new-account">Create New Account</a>
</div>
<div class="col"></div>
</div>
</div>
<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 src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<!-- Always Download latest version of Boostrap and add here-->
<script src="bootstrap-4.0.0-alpha.6-dist/js/bootstrap.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>```
so my col-8 is between two cols and it was supposed to auto resize so why is it shifting to the left.
I was expecting it to be centre aligned automatically inside the row but it didn't work. it was to my knowledge that if I put col-8 in between two cols that they would automatically fit at least that's what appeared in the video.
添加：
col-8
至此行：
<div class="card signin-card" style="width: 27rem;">
像这样：
<div class="col-8 card signin-card" style="width: 27rem;">
并删除以下div：
<div class="col-8">
这应该是窍门