我正在尝试将3列居中，总共需要9列引导程序而不是12列，因此，我需要将这种类型的Bootstrap 4列居中。请查看代码段我的错。我正在尝试使用justify-content-center，但是如果我使用
，它并不能完全位于移动设备的中心justify-content-center
在sm设备中，最后一个孩子不想居中，而是在左侧。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<style>
.border{
border: 1px solid red!important;
}
</style>
</head>
<body class="p-0 m-0">
<div class="container">
<div class="row justify-content-sm-start justify-content-md-center">
<div class="col-sm-5 col-md-3 border">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nostrum dolores, veritatis tempore nihil explicabo mollitia doloribus laborum! Cupiditate, saepe. Commodi, mollitia? Sit quia magnam commodi inventore impedit quam nam voluptate est odio, alias unde a doloribus aliquid beatae eaque recusandae corrupti delectus reprehenderit ipsa dolorum hic. Labore possimus eos amet. Officia porro vel, veritatis minus natus tempore ratione quo nostrum, adipisci laboriosam temporibus qui. Architecto possimus laboriosam explicabo iusto! Minus iusto amet aperiam voluptatum libero placeat vero, molestias dolorem vitae eius doloremque optio? Ea blanditiis distinctio similique labore odio culpa, quis nobis veniam sapiente sed. Illum labore saepe doloremque sapiente.</div>
<div class="col-sm-5 col-md-3 border ">Et laborum libero dignissimos ea molestias, quae rerum veritatis harum quidem soluta! Perferendis cumque minima modi enim ducimus exercitationem accusantium facilis dolore corrupti ab, esse autem. Illo inventore tenetur aut recusandae nostrum dolorum dolore doloribus nihil cupiditate. Voluptas ex commodi expedita atque sint obcaecati iure explicabo ipsam quo consequatur laudantium officia autem recusandae sapiente quae excepturi a culpa sunt, ratione quis tenetur vitae odio corrupti. Perspiciatis blanditiis, debitis eaque sequi porro hic minus ex adipisci iste ad accusamus aut atque eius mollitia error ducimus labore praesentium sed dolorem? Incidunt eaque ex eum unde ducimus et libero repudiandae aliquid porro nesciunt.</div>
<div class="col-sm-5 col-md-3 border">Laboriosam itaque labore iusto quidem ipsum quae et ipsam alias incidunt cumque, nobis quaerat corporis inventore! Quibusdam et ipsam quam pariatur unde. Modi aut rerum iure exercitationem fugit similique tenetur maxime saepe, vitae laudantium minus ad repudiandae cumque ea dolorum eaque distinctio autem provident officiis facilis, atque veritatis reiciendis animi. Consequatur quam eveniet doloremque sequi inventore, explicabo excepturi beatae facilis porro quibusdam suscipit. Id fugit fugiat vel excepturi autem quae, recusandae provident ipsum, praesentium ex facilis aspernatur amet dolore dolorum? Dicta quod pariatur autem nulla explicabo corporis sunt necessitatibus ad natus rerum suscipit, velit sequi maiores quam? Culpa, quisquam odit.</div>
</div>
</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<style>
.border{
border: 1px solid red!important;
}
</style>
</head>
<body class="p-0 m-0">
<div class="container">
<div class="row justify-content-md-center justify-content-start">
<div class="col-sm-5 col-md-3 border">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nostrum dolores, veritatis tempore nihil explicabo mollitia doloribus laborum! Cupiditate, saepe. Commodi, mollitia? Sit quia magnam commodi inventore impedit quam nam voluptate est odio, alias unde a doloribus aliquid beatae eaque recusandae corrupti delectus reprehenderit ipsa dolorum hic. Labore possimus eos amet. Officia porro vel, veritatis minus natus tempore ratione quo nostrum, adipisci laboriosam temporibus qui. Architecto possimus laboriosam explicabo iusto! Minus iusto amet aperiam voluptatum libero placeat vero, molestias dolorem vitae eius doloremque optio? Ea blanditiis distinctio similique labore odio culpa, quis nobis veniam sapiente sed. Illum labore saepe doloremque sapiente.</div>
<div class="col-sm-5 col-md-3 border ">Et laborum libero dignissimos ea molestias, quae rerum veritatis harum quidem soluta! Perferendis cumque minima modi enim ducimus exercitationem accusantium facilis dolore corrupti ab, esse autem. Illo inventore tenetur aut recusandae nostrum dolorum dolore doloribus nihil cupiditate. Voluptas ex commodi expedita atque sint obcaecati iure explicabo ipsam quo consequatur laudantium officia autem recusandae sapiente quae excepturi a culpa sunt, ratione quis tenetur vitae odio corrupti. Perspiciatis blanditiis, debitis eaque sequi porro hic minus ex adipisci iste ad accusamus aut atque eius mollitia error ducimus labore praesentium sed dolorem? Incidunt eaque ex eum unde ducimus et libero repudiandae aliquid porro nesciunt.</div>
<div class="col-sm-5 col-md-3 border">Laboriosam itaque labore iusto quidem ipsum quae et ipsam alias incidunt cumque, nobis quaerat corporis inventore! Quibusdam et ipsam quam pariatur unde. Modi aut rerum iure exercitationem fugit similique tenetur maxime saepe, vitae laudantium minus ad repudiandae cumque ea dolorum eaque distinctio autem provident officiis facilis, atque veritatis reiciendis animi. Consequatur quam eveniet doloremque sequi inventore, explicabo excepturi beatae facilis porro quibusdam suscipit. Id fugit fugiat vel excepturi autem quae, recusandae provident ipsum, praesentium ex facilis aspernatur amet dolore dolorum? Dicta quod pariatur autem nulla explicabo corporis sunt necessitatibus ad natus rerum suscipit, velit sequi maiores quam? Culpa, quisquam odit.</div>
</div>
</div>
</body>
</html>bootstrap对此有解决方案。简单地将mx-auto添加到最后一个div，我将居中div。检查我的代码段。
FYI：引导程序具有带有颜色https://getbootstrap.com/docs/4.4/utilities/borders/#border-color的内置边框”>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row justify-content-sm-start justify-content-md-center">
<div class="col-sm-5 col-md-3 border border-danger mx-auto">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nostrum dolores, veritatis tempore nihil explicabo mollitia doloribus laborum! Cupiditate, saepe. Commodi, mollitia? Sit quia magnam commodi inventore impedit quam nam voluptate est odio, alias
unde a doloribus aliquid beatae eaque recusandae corrupti delectus reprehenderit ipsa dolorum hic. Labore possimus eos amet. Officia porro vel, veritatis minus natus tempore ratione quo nostrum, adipisci laboriosam temporibus qui. Architecto possimus
laboriosam explicabo iusto! Minus iusto amet aperiam voluptatum libero placeat vero, molestias dolorem vitae eius doloremque optio? Ea blanditiis distinctio similique labore odio culpa, quis nobis veniam sapiente sed. Illum labore saepe doloremque
sapiente.
</div>
<div class="col-sm-5 col-md-3 border border-danger mx-auto">Et laborum libero dignissimos ea molestias, quae rerum veritatis harum quidem soluta! Perferendis cumque minima modi enim ducimus exercitationem accusantium facilis dolore corrupti ab, esse autem. Illo inventore tenetur aut recusandae nostrum dolorum
dolore doloribus nihil cupiditate. Voluptas ex commodi expedita atque sint obcaecati iure explicabo ipsam quo consequatur laudantium officia autem recusandae sapiente quae excepturi a culpa sunt, ratione quis tenetur vitae odio corrupti. Perspiciatis
blanditiis, debitis eaque sequi porro hic minus ex adipisci iste ad accusamus aut atque eius mollitia error ducimus labore praesentium sed dolorem? Incidunt eaque ex eum unde ducimus et libero repudiandae aliquid porro nesciunt.</div>
<div class="col-sm-5 col-md-3 border border-danger mx-auto">Laboriosam itaque labore iusto quidem ipsum quae et ipsam alias incidunt cumque, nobis quaerat corporis inventore! Quibusdam et ipsam quam pariatur unde. Modi aut rerum iure exercitationem fugit similique tenetur maxime saepe, vitae laudantium minus
ad repudiandae cumque ea dolorum eaque distinctio autem provident officiis facilis, atque veritatis reiciendis animi. Consequatur quam eveniet doloremque sequi inventore, explicabo excepturi beatae facilis porro quibusdam suscipit. Id fugit fugiat
vel excepturi autem quae, recusandae provident ipsum, praesentium ex facilis aspernatur amet dolore dolorum? Dicta quod pariatur autem nulla explicabo corporis sunt necessitatibus ad natus rerum suscipit, velit sequi maiores quam? Culpa, quisquam
odit.
</div>
</div>
</div>您可以使用媒体查询来获得所需的输出。对于移动设备的宽度，您要居中，使用媒体查询添加CSS效果并使它居中。然后，它将仅适用于您在媒体查询中提到的移动设备宽度。您可以按以下方式使用媒体查询将此添加到您的css文件。例子是，