Bootstrap 4 Grid布局异常问题咨询（附示例代码）

嘿，我来帮你搞定这个问题！你的网格代码本身是符合Bootstrap 4规范的，出现最后一行列没有左内边距的情况，大概率是你引入的bootstrap-grid.css文件不完整、版本错误，或者浏览器缓存导致旧样式生效，下面是具体的解决步骤：

你的代码示例： #

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Homepage</title> 
    <link rel="stylesheet" type="text/css" href="vendors/bootstrap-grid/bootstrap-grid.css"> 
</head> 
<body> 
    <div class="container-fluid"> 
        <div class="row"> 
            <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div> 
            <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> 
        </div> 
        <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop --> 
        <div class="row"> 
            <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> 
            <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> 
            <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> 
        </div> 
        <!-- Columns are always 50% wide, on mobile and desktop --> 
        <div class="row"> 
            <div class="col-xs-6">.col-xs-6</div> 
            <div class="col-xs-6">.col-xs-6</div> 
        </div> 
    </div> 
</body> 
</html>

问题截图： #

具体解决步骤： #

1. 替换为官方完整的Bootstrap 4 Grid CDN资源 #

本地的bootstrap-grid.css可能存在文件损坏或版本不匹配的问题，直接使用官方CDN链接能避免这个问题：

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

把你原来的本地CSS引用替换成上面的代码，确保加载的是官方完整的网格样式文件。

2. 强制刷新浏览器清除缓存 #

有时候浏览器会缓存旧的CSS文件，导致新样式不生效。按下Ctrl + F5（Windows/Linux）或Cmd + Shift + R（Mac）强制刷新页面，加载最新的CSS资源。

3. 临时修复方案（不推荐优先使用） #

如果上面两步都没解决，可以手动给最后一行的列添加左内边距，但这是临时 workaround，优先保证CSS文件正确才是根本：

.row:last-child .col {
    padding-left: 15px;
}

注意不要随便用!important，除非确实有样式冲突无法覆盖。

另外补充一点：Bootstrap 4里col-xs-*类已经可以简化为col-*，不过旧写法也兼容，不会导致这个问题，所以不用纠结类名写法~

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