如何使用 Bootstrap 5 在中心设置列？
这里的目标是在 bootstrap 中居中一列。Bootstrap 是一个免费的开源 CSS 框架，致力于响应性、移动优先的前端网络开发。在 Bootstrap 中有两种方法可以将列
居中。
接近 1(偏移):
第一种方法使用自举偏移类。关键是设置一个等于行剩余大小一半的偏移量。例如，大小为 2 的列将通过添加偏移量 5 来居中，即(12-2)/2。下面的示例实现了这一点。
超文本标记语言
<!DOCTYPE html>
<html>
<link rel="stylesheet"
href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous" />
<body>
<div class="container">
<div class="row">
<div style="height: 200px;"
class="col-md-6 offset-md-3
text-center bg-success">.
col-md-6 .offset-md-3</div>
</div>
</div>
</body>
</html>
输出
进场 2(保证金自动):
将左右边距设置为自动将使 div 相对于其父元素居中。左右边距可以用设置。ml-auto 和。mr-auto 类分别为。下面的示例实现了这一点。
超文本标记语言
<!DOCTYPE html>
<html>
<link rel="stylesheet"
href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous" />
<body>
<div class="container">
<div class="row">
<div style="height: 200px;"
class="mr-auto ml-auto
text-center bg-success">
.ml-auto .mr-auto</div>
</div>
</div>
</body>
</html>
输出
版权属于：月萌API www.moonapi.com，转载请注明出处
