我正在尝试居中 3 列，总共需要 9 列引导而不是 12 列，因此，我需要将这种类型的引导程序 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。检查我的代码段。
仅供参考：引导程序具有内置边框与颜色 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 文件或标记之间。例如，
@media screen and (min-width: 320px) and (max-width: 480px){
/* styles to make the content center */
}
像这样添加您想要的移动设备的相关宽度。希望这会有所帮助。