如何在Bootstrap+Laravel项目中实现一行三个占满全宽的列

修复方案 #

按以下步骤修改即可实现预期的三等分列布局：

存在的问题

• 未引入Bootstrap核心CSS文件，栅格系统原生样式不生效
• HTML类名书写错误，class属性里的类名不需要加.前缀，你写的.col-md-4是错误写法
• 自定义CSS重写了Bootstrap原生container、row、col类的样式，超大的内边距、外边距直接破坏了栅格布局规则
• 栅格类选择错误，Bootstrap默认是12栅格体系，要实现一行三等分，每个列应该占4格，使用col-4类即可

修改后完整代码

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Pop</title>
    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
    <!-- 引入Bootstrap核心CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 自定义样式 -->
    <style>
        html{
            background: #01ACAD;
            padding: 15px 2%;
        }
        /* 自定义卡片样式单独定义，避免覆盖Bootstrap原生类 */
        .dashboard-card {
            background: grey;
            padding: 2rem;
        }
    </style>
</head>
<body>
    <div class="container bg-white rounded py-4">
        <div class="row g-3">
            <div class="col-4">
                <div class="dashboard-card">
                    <h2>LOGO</h2>
                </div>
            </div>
            <div class="col-4">
                <div class="dashboard-card">
                    <h2>LOGO</h2>
                </div>
            </div>
            <div class="col-4">
                <div class="dashboard-card">
                    <h2>LOGO</h2>
                </div>
            </div>
       </div>
    </div>
    <!-- 可选引入Bootstrap JS，用于交互组件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

改动说明

• 新增Bootstrap 5资源引入，原生栅格系统直接生效，不需要自行编写浮动、宽度适配样式
• 移除对Bootstrap原生布局类的错误覆盖样式，额外自定义的卡片样式单独用新类名dashboard-card定义，避免样式冲突
• 修正类名写法，去掉多余的.前缀
• 使用g-3类给列之间增加间距，和预期效果的间隙匹配
• 调整页面基础内边距，和设计稿的背景露出效果一致

内容的提问来源于stack exchange，提问作者Mario