Blazor Pages（.NET）：Bootstrap实现Jumbotron左文右图及图片缩放问题

问题根源 #

当前代码中文本容器和图片容器都是默认块级元素，会自动上下排列；图片外层嵌套的.container引入了额外布局限制，导致img-fluid无法正常发挥自适应缩放作用。

修改方案 #

利用Bootstrap的**栅格系统（row + col）**实现左右并排布局，同时调整图片容器结构确保缩放正常：

• 在.jumbotron内的.container-fluid中添加.row作为栅格行容器
• 文本放在左侧列（如col-md-8，中等屏幕及以上占8列宽度）
• 图片放在右侧列（如col-md-4，中等屏幕及以上占4列宽度）
• 移除图片外层多余的.container，让img-fluid直接作用于图片，确保自适应容器宽度

修改后的完整代码 #

<div class="jumbotron">
    <div class="container-fluid">
        <h1 class="display-4">Welcome to my site!</h1>
        <div class="row align-items-center"> <!-- 让文本和图片垂直居中对齐 -->
            <!-- 左侧文本列：中等屏幕及以上占8列 -->
            <div class="col-md-8">
                <p class="lead text-left">Welcome to my personal site. I hope to use this as a place where you can learn more about me, my projects, and my ideas.</p>
                <p class="lead text-left">I am just learning web development, so many aspects of this website won't be perfect. I hope that this place can serve as a living example of my progression!</p>
            </div>
            <!-- 右侧图片列：中等屏幕及以上占4列 -->
            <div class="col-md-4">
                <img src="/Images/Headshot2020.jpg" class="img-fluid" alt="Image of Matt Marlow"/>
            </div>
        </div>
    </div>
</div>

补充说明 #

• align-items-center类会让文本和图片在垂直方向居中，更贴合预期视觉效果
• col-md-*类实现响应式布局：屏幕宽度小于768px（移动端）时，两列自动上下堆叠，保证移动端浏览体验
• img-fluid类会让图片最大宽度为100%、高度自适应，完美适配所在列的宽度

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