如何用Bootstrap 3实现等效表格rowspan和colspan的网格布局？

你代码里的问题是用了Bootstrap 2的栅格类（row-fluid、span*），但引入的是Bootstrap 3的CSS，两者不兼容导致布局失效。Bootstrap 3改用了row和col-*-*的栅格体系，以下是修正后的完整代码，完全匹配你要的布局：

修正后的代码 #

CSS #

.container {
    margin-top: 10px;
}
.well {
    min-height: 40px; /* 保证小区块有基础高度，可按需调整 */
}

HTML #

<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
    <!-- 第一行：左侧大区块 + 右侧四小区块 -->
    <div class="row">
        <div class="col-md-4">
            <div class="well">1<br><br><br><br><br></div>
        </div>
        <div class="col-md-8">
            <div class="row">
                <div class="col-md-6">
                    <div class="well">2</div>
                </div>
                <div class="col-md-6">
                    <div class="well">3</div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="well">4</div>
                </div>
                <div class="col-md-6">
                    <div class="well">5</div>
                </div>
            </div>
        </div>
    </div>

    <!-- 第二行：三个等宽区块 -->
    <div class="row" style="margin-top: 10px;">
        <div class="col-md-4">
            <div class="well">6</div>
        </div>
        <div class="col-md-4">
            <div class="well">6</div>
        </div>
        <div class="col-md-4">
            <div class="well">6</div>
        </div>
    </div>
</div>

关键修改说明 #

• 把Bootstrap 2的row-fluid替换为Bootstrap 3的row
• 把span4/span8/span6替换为col-md-4/col-md-8/col-md-6（md对应中等屏幕适配，可按需换成sm/lg适配不同尺寸）
• 所有栅格元素必须包裹在container或container-fluid容器内，这是Bootstrap 3栅格的强制要求
• 给第二行添加margin-top是可选操作，用于优化上下布局的间距

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