Bootstrap响应式页面同一区块移动端图片不显示问题求助

我用Bootstrap搭建了一个响应式UI页面，在about_sec_1区块内，左侧通过col-lg-5和col类实现响应式图片布局，右侧为文本内容。桌面端图片显示正常，但用开发者工具测试各类移动设备时，图片均无法显示。

无法显示的图片代码 #

<img class="w-100 " src="<?php echo get_template_directory_uri(); ?>/images/tablesetting.jpg" alt="Thefirstpics">

完整区块HTML代码 #

<!--About Dine section 1-->
<section class="about_sec_1 ">
  <div class="container ">
    <!--In this section, I divided two columns: one with 'col-lg-5' and 
the second with 'col-lg-6'. Additionally, I added 'col' classes to ensure equal width,
.col classese acuired the 100% width according to screen size
-->
    <div class="  about_content">
      <div class="left_img col col-lg-5">

<img class="w-100 " src="<?php echo get_template_directory_uri(); ?>/images/tablesetting.jpg" alt="Thefirstpics">

    </div>

      <div class="right_content col  col-lg-6">
        <div class="text-center">
  <h1 class="pb-5"><?php echo esc_html(get_post_meta(get_the_ID(), 'about_title', true)); ?></h1>
  <h4 class="pb-3"><?php echo esc_html(get_post_meta(get_the_ID(), 'about_subtitle', true)); ?> </h4>
        </div>
        <p class="about_para ">
          The Catering was founded in blabla by Mr. Smith in lorem ipsum dolor sit amet, consectetur adipiscing elit
          consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
          minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
          iruredolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.We only use
          seasonal ingredients.
        <p class="text-muted">
          Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
          laborum consectetur adipiscing elit, sed do eiusmod temporincididunt ut labore et dolore magna aliqua. Ut
          enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </p>
        </p>
      </div>
    </div>
  </div>
</section>

<!--end of About Dine section 1-->

相关CSS代码 #

/* media querie for about dine section img*/
@media(max-width:575px) {
    .left_img {
    display:block;

    }
}

.about_content,
.menu_content {
    /*make two column content of menu and about section by using flexbox*/
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 3.5rem;
}

.about_para {
    line-height: 30px;
}

效果截图 #

• 桌面端显示：
  
• 移动端显示：
  

问题诊断与修复方案 #

1. 修复Bootstrap网格结构冲突 #

Bootstrap的col类必须依赖父容器的.row类才能正常工作，你当前的.about_content仅用自定义flex布局替代了.row，导致移动端网格布局异常，间接引发图片容器渲染问题。

修复代码：
给.about_content添加.row类，保留原有自定义样式：

<div class="about_content row">
  <div class="left_img col col-lg-5">
    <!-- 图片代码 -->
  </div>
  <div class="right_content col col-lg-6">
    <!-- 文本内容 -->
  </div>
</div>

2. 完善移动端图片容器样式 #

当前媒体查询仅覆盖max-width:575px的屏幕，且样式不足。补充覆盖全移动端尺寸的样式，确保容器可见：

@media(max-width:991px) { /* 覆盖所有小于lg的屏幕 */
    .left_img {
        display: block !important;
        width: 100%;
        min-height: auto;
    }
}

3. 修正HTML嵌套错误 #

你的代码中存在p标签嵌套问题（p不能嵌套块级元素），会导致浏览器解析异常，影响布局渲染：

<!-- 错误写法 -->
<p class="about_para ">
  ...
  <p class="text-muted">...</p>
</p>

<!-- 正确写法 -->
<p class="about_para ">
  The Catering was founded in blabla by Mr. Smith in lorem ipsum dolor sit amet, consectetur adipiscing elit
  consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
  minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
  iruredolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.We only use
  seasonal ingredients.
</p>
<p class="text-muted">
  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
  laborum consectetur adipiscing elit, sed do eiusmod temporincididunt ut labore et dolore magna aliqua. Ut
  enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>

4. 验证图片路径（可选） #

若上述修复无效，打开浏览器开发者工具的Network面板，查看移动端图片请求状态：

• 若返回404，检查get_template_directory_uri()是否正确输出主题目录地址
• 若请求成功但图片不显示，检查是否存在visibility:hidden/opacity:0等隐藏样式，或图片本身尺寸异常

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