Bootstrap 4：如何让container-fluid内元素与container自适应对齐并保持全屏

阿华AIGC实验室

2026-5-6

当然可以实现！咱们只需要针对不同屏幕尺寸，给.container-fluid里的横向滚动列表设置动态内边距，就能让它始终和外部.container的内容对齐。

核心思路

Bootstrap的.container在屏幕宽度小于你设置的1450px时，会占满整个屏幕宽度，左右各有15px的内边距；当屏幕宽度超过1450px时，.container会固定为1450px宽并居中显示，左右保留15px内边距，剩下的空间由自动外边距（margin:auto）填充。

我们要做的就是让.container-fluid里的列表：

小屏幕下和.container用一样的内边距
大屏幕下，把列表的左右内边距设置为「屏幕剩余空间的一半 + 15px」，这样就刚好和.container里内容的边缘对齐

修改后的完整代码

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<style type="text/css">
.container {
    max-width: 1450px;
    background: lightblue;
}
.container-fluid {
    background-color: wheat;
}
ul {
    display: flex;
    overflow-x: scroll;
    margin: 0; /* 清除浏览器默认margin */
    padding: 0 15px; /* 小屏幕下和container内边距一致 */
}
li {
    list-style: none;
    margin-right: 8px; /* 给图片间加小间距，可选调整 */
}
/* 屏幕宽度≥1450px时，计算动态内边距 */
@media (min-width: 1450px) {
    ul {
        padding-left: calc((100vw - 1450px) / 2 + 15px);
        padding-right: calc((100vw - 1450px) / 2 + 15px);
    }
}
</style>
<div class="container">
    <div class="row">
        <div class="col-12">
            <h1>Carousel Header</h1>
        </div>
    </div>
</div>
<div class="container-fluid px-0">
    <ul>
        <li><img src="https://i.picsum.photos/id/229/200/300.jpg"></li>
        <li><img src="https://i.picsum.photos/id/230/200/300.jpg"></li>
        <li><img src="https://i.picsum.photos/id/231/200/300.jpg"></li>
        <li><img src="https://i.picsum.photos/id/232/200/300.jpg"></li>
        <li><img src="https://i.picsum.photos/id/233/200/300.jpg"></li>
        <li><img src="https://i.picsum.photos/id/234/200/300.jpg"></li>
        <li><img src="https://i.picsum.photos/id/235/200/300.jpg"></li>
        <li><img src="https://i.picsum.photos/id/236/200/300.jpg"></li>
        <li><img src="https://i.picsum.photos/id/237/200/300.jpg"></li>
        <li><img src="https://i.picsum.photos/id/238/200/300.jpg"></li>
        <li><img src="https://i.picsum.photos/id/239/200/300.jpg"></li>
        <li><img src="https://i.picsum.photos/id/240/200/300.jpg"></li>
    </ul>
</div>
<div class="container">
    <div class="row">
        <div class="col-12">
            <h2>TEXT</h2>
        </div>
        <div class="col-12">
            <p>some text</p>
        </div>
    </div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>