使用多个标签Bootstrap4在列内水平对齐

基础概念

Bootstrap 是一个流行的前端框架，用于快速开发响应式和移动优先的网页。Bootstrap 4 提供了一套丰富的组件和工具，用于简化网页设计和开发。其中，网格系统（Grid System）是 Bootstrap 的核心特性之一，用于创建响应式布局。

类型

Bootstrap 4 的网格系统基于 12 列布局。你可以将页面分成 12 列，并根据需要组合这些列来创建不同的布局。

应用场景

响应式网页设计：适用于需要适应不同屏幕尺寸的网站。
复杂布局：适用于需要创建复杂布局的网页，如仪表盘、电子商务网站等。
快速原型开发：适用于快速搭建和测试网页布局。

示例代码

以下是一个使用 Bootstrap 4 在列内水平对齐多个标签的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 4 Align Tags Horizontally</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4 text-center">
                <span class="badge badge-primary">Tag 1</span>
            </div>
            <div class="col-md-4 text-center">
                <span class="badge badge-secondary">Tag 2</span>
            </div>
            <div class="col-md-4 text-center">
                <span class="badge badge-success">Tag 3</span>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>