Bootstrap中图片导致流体容器撑满整页的问题求助

我刚接触Bootstrap第2天，显然操作出了问题。我用了container-fluid容器，里面有两行内容：第一行是标题加一张图片，我已经缩小图片高度并设置了响应式，但图片还是把第一行的第二列撑得几乎占满整个页面。移除图片后布局就正常，换任何图片都这样，问题肯定出在Bootstrap的用法上。

我的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>A basic website with Bootstrap #1</title>
    <!-- Including Bootstrap here-->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container-fluid bg-secondary">
        <div class="row">
            <div class="col">
                <h1 class="title-text text-light">Welcome to this Bootstrap Site #1</h1>
            </div>
            <div class="col">
                <img src="masterchef.png" class="img-responsive h-25" alt="">
            </div>
        </div>
        <div class="row">
            <div class="col">
                <h2 class="subtitle-text text-light">A site to learn Bootstrap well</h2>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

我试过用thumbnail类、查Bootstrap文档、调整元素顺序，都没用。

解决方案 #

问题出在两个核心点：

1. Bootstrap 5已经移除了img-responsive类，替代的是img-fluid——这个类会让图片自适应容器宽度并保持比例，是Bootstrap 5里实现响应式图片的标准类。
2. 你用的col类默认是均分行宽度，但图片原始宽度过大时，会把所在列的宽度强制撑大，挤压标题列的空间。

修改方案

• 把img-responsive替换为img-fluid
• 给图片所在列设置col-auto，让它根据图片实际宽度自适应，标题列自动占据剩余空间；或者给两列指定固定比例（比如col-8和col-4），明确分配宽度
• 若要限制图片高度，h-25可以保留，但必须搭配img-fluid才能同时控制宽度不溢出

修改后的代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>A basic website with Bootstrap #1</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container-fluid bg-secondary">
        <div class="row align-items-center"> <!-- 可选：让内容垂直居中 -->
            <div class="col"> <!-- 标题列自动占剩余空间 -->
                <h1 class="title-text text-light">Welcome to this Bootstrap Site #1</h1>
            </div>
            <div class="col-auto"> <!-- 图片列自适应宽度 -->
                <img src="masterchef.png" class="img-fluid h-25" alt="">
            </div>
        </div>
        <div class="row">
            <div class="col">
                <h2 class="subtitle-text text-light">A site to learn Bootstrap well</h2>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

如果想要固定宽度比例，也可以这么写：

<div class="row align-items-center">
    <div class="col-8">
        <h1 class="title-text text-light">Welcome to this Bootstrap Site #1</h1>
    </div>
    <div class="col-4">
        <img src="masterchef.png" class="img-fluid" alt="">
    </div>
</div>

这样就能彻底解决图片撑大列的问题，同时保持响应式布局。

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