html - 如何在 Bootstrap 中居中对齐多个列？
问题描述
我正在尝试将卡片 1 居中对齐，以便它在页面中心与其余卡片（卡片 2、卡片 3、卡片 4、卡片 5）很好地对齐。
在尝试了多种方法后，我似乎无法找到解决方案。
我怎样才能做到这一点？
这是我的代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="containter">
<div class="row">
<div class="col-sm-4 py-2">
<div class="card card-body h-100">
<h5 class="card-title">Card 1</h5>
<p class="card-text">
<br />Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
</p>
</div>
</div>
<div class="col-md-8">
<div class="row justify-content-center">
<div class="col-sm-4 py-2">
<div class="card card-body h-100">
<h5 class="card-title">Card 2</h5>
<p class="card-text">
<br />Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
</p>
<button type="button" class="mt-auto btn btn-lg btn-block btn-outline-primary"><a style="text-decoration: none" href="">Get More</a></button>
</div>
</div>
<div class="col-sm-4 py-2">
<div class="card card-body h-100">
<h5 class="card-title">Card 3</h5>
<p class="card-text">
<br />Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
</p>
<button type="button" class="mt-auto btn btn-lg btn-block btn-outline-primary"><a style="text-decoration: none" href="">Get More</a></button>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-sm-4 py-2">
<div class="card card-body h-100">
<h5 class="card-title">Card 4</h5>
<p class="card-text">
<br />Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
</p>
<button type="button" class="mt-auto btn btn-lg btn-block btn-outline-primary"><a style="text-decoration: none" href="">Get More</a></button>
</div>
</div>
<div class="col-sm-4 py-2">
<div class="card card-body h-100">
<h5 class="card-title">Card 5</h5>
<p class="card-text">
<br />Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
<br>
</p>
<button type="button" class="mt-auto btn btn-lg btn-block btn-outline-primary"><a style="text-decoration:none" href="">Get More</a></button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
解决方案
我从您的问题中了解到，您希望卡片 1位于页面的中心和顶部。下面的代码片段将做到这一点。
我在您的代码中注意到并更改的内容是：
container您将class拼写为containter.- 因为您希望卡片 1位于顶行的中心。我将它添加到它自己的行中并给
justify-content-center它上课。 - 将所有其他卡片保留在另一排。
因此，您还可以在下面找到更新的代码以及有关更改的注释：
<!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="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row justify-content-center"> <!-- added class to center card -->
<!-- card -->
<div class="col-sm-8 py-2"> <!-- changed card width to 8 from 4 -->
<div class="card card-body h-100">
<h5 class="card-title">Card 1</h5>
<p class="card-text">
<br />Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
</p>
</div>
</div>
</div> <!-- ended row for Card 1 here -->
<div class="row"> <!-- started new row for rest of the cards -->
<div class="col-md-12">
<!-- Row starts -->
<div class="row justify-content-center">
<!-- Labor Market Data card -->
<div class="col-sm-4 py-2">
<div class="card card-body h-100">
<h5 class="card-title">Card 2</h5>
<p class="card-text">
<br />Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
</p>
<!-- Get More button -->
<button type="button" class="mt-auto btn btn-lg btn-block btn-outline-primary"><a style="text-decoration: none" href="">Get More</a></button>
</div>
</div>
<!-- Publications card -->
<div class="col-sm-4 py-2">
<div class="card card-body h-100">
<h5 class="card-title">Card 3</h5>
<p class="card-text">
<br />Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
</p>
<!-- Get More button -->
<button type="button" class="mt-auto btn btn-lg btn-block btn-outline-primary"><a style="text-decoration: none" href="">Get More</a></button>
</div>
</div>
</div>
<!-- Row ends -->
<!-- row starts -->
<div class="row justify-content-center">
<!--card -->
<div class="col-sm-4 py-2">
<div class="card card-body h-100">
<h5 class="card-title">Card 4</h5>
<p class="card-text">
<br />Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
</p>
<!-- Get More button -->
<button type="button" class="mt-auto btn btn-lg btn-block btn-outline-primary"><a style="text-decoration: none" href="">Get More</a></button>
</div>
</div>
<!-- card -->
<div class="col-sm-4 py-2">
<div class="card card-body h-100">
<h5 class="card-title">Card 5</h5>
<p class="card-text">
<br />Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
<br>
</p>
<!-- Get More button -->
<button type="button" class="mt-auto btn btn-lg btn-block btn-outline-primary"><a style="text-decoration:none" href="">Get More</a></button>
</div>
</div>
</div>
<!-- row ends -->
</div>
</div>
</div>
</body>
</html>谢谢！！