如何用Bootstrap实现图片全屏宽度拉伸？

算力阿峰

2026-8-25

解决图片无法铺满Bootstrap容器的问题

你遇到的左右留白问题，主要来自Bootstrap容器和行组件的默认内边距/外边距设置，加上自定义样式的冲突，下面是具体修复方案：

核心问题点

container-fluid默认带有左右内边距，导致最外层容器留空
row-fluid的默认间距（gutter）没有完全抵消容器的内边距
父容器block设置的margin-left: auto; margin-right: auto;给容器加了居中限制，阻止了宽度铺满
图片用min-width: 100%而非width: 100%，无法严格占满父容器宽度

修复后的代码

HTML部分

<div class="container-fluid p-0">
    <div class="row color-block-top"></div>
    <div class="row-fluid block g-0">
        <img src="Images/family-beach.jpg" alt="Family on the beach" class="beach">
    </div>
    <div class="row color-block-top"></div>
</div>

CSS部分

.color-block-top {
    background-color: rgb(36,54,138);
    padding: 1vh;
    min-width: 20em;
}

.block {
    width: 100%;
    margin: 0;
}

.beach {
    width: 100%;
    height: 500px;
    object-fit: cover;
    display: block;
}