如何解决Razor页面中含图文的PageHeader组件响应式重叠问题？

问题场景 #

我有一个包含Header的Razor页面，Header是PageHeader.razor组件。尝试设置响应式布局，但在小视图模式下文本与图片出现重叠现象。

页面代码（Razor） #

<div class="row myheader">
    @{
        string title = "This is a title";
        string subtitle = "This is a subtitle";
        <PageHeader Title=@title Subtitle=@subtitle />
    }
</div>

Header组件代码（PageHeader.razor） #

<div class="d-flex align-items-center">
    <div class="col-2 me-0">
        @{
            string url = $"/images/trofee.png";
            <img src=@url class="rounded float-start image-responsive" height="256" width="256" />
        }
    </div>
    <div class="col-10 ms-0 rounded mb-3 align-self-end text-start">
        <div class="row mytitleheader">
            <h2><span>@Title</span></h2>
        </div>
        <div class="row mysubtitleheader">
            <span>@Subtitle</span>
        </div>
    </div>
</div>

@code {
    [Parameter] public string Title { get; set; } = string.Empty;
    [Parameter] public string Subtitle { get; set; } = string.Empty;
    [Parameter] public string ImageType { get; set; } = string.Empty;
}

CSS代码 #

.myheader {
    background: -webkit-linear-gradient(left, yellow, orange); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, yellow, orange); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, yellow, orange); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, yellow, orange); /* Standard syntax (must be last) */
    box-shadow: 10px 10px 5px black;
    margin: 4px 7px 25px 4px;
}

.mytitleheader {
    color: red;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-weight: bolder;
    font-style: italic;
}

.mysubtitleheader {
    font-style: italic;
    color: blue;
    font-size: 1.5rem;
}

视图效果 #

问题原因 #

1. 图片固定尺寸导致溢出：img标签设置了固定的height="256"和width="256"，小屏幕下图片不会自动缩小，直接挤占文本区域。
2. 布局类混用冲突：同时使用了d-flex和Bootstrap栅格的col-2/col-10类，但栅格列类需要配合row容器才能正确生效，当前结构下布局逻辑混乱。
3. 缺少响应式断点处理：没有针对小屏幕设置布局调整，比如换行或调整元素占比，导致元素在空间不足时重叠。

解决方案 #

修改PageHeader.razor组件代码，优化响应式布局逻辑：

<div class="row align-items-center flex-wrap">
    <!-- 响应式列：大屏占2列，小屏占整行，居中显示图片 -->
    <div class="col-md-2 col-12 d-flex justify-content-center mb-3 mb-md-0">
        @{
            string url = $"/images/trofee.png";
            <!-- 使用img-fluid实现图片自适应，保留最大尺寸限制 -->
            <img src=@url class="rounded img-fluid" />
        }
    </div>
    <!-- 响应式列：大屏占10列，小屏占整行，文本小屏居中、大屏左对齐 -->
    <div class="col-md-10 col-12 text-center text-md-start">
        <div class="mytitleheader">
            <h2><span>@Title</span></h2>
        </div>
        <div class="mysubtitleheader">
            <span>@Subtitle</span>
        </div>
    </div>
</div>

@code {
    [Parameter] public string Title { get; set; } = string.Empty;
    [Parameter] public string Subtitle { get; set; } = string.Empty;
    [Parameter] public string ImageType { get; set; } = string.Empty;
}

关键修改说明 #

• 用row容器替代d-flex，配合flex-wrap实现小屏幕自动换行。
• 使用col-md-2/col-12设置响应式列宽：屏幕≥768px时图片占2列，文本占10列；小屏时两者都占整行，避免重叠。
• 图片替换为img-fluid类，去掉固定宽高，实现自适应缩放，可通过CSS额外限制最大尺寸：

  img.img-fluid {
      max-width: 256px;
      max-height: 256px;
  }
  

• 添加mb-3 mb-md-0，小屏时图片下方保留间距，大屏时取消，优化视觉效果。
• 文本区域设置text-center text-md-start，小屏时文本居中，大屏时左对齐，适配不同屏幕的阅读习惯。

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