Bootstrap中等屏幕下空白列消失问题求助

我看了你的代码，问题出在空白列的栅格类设置和无内容导致高度坍缩这两点上：

问题原因 #

你给空白列只加了col-lg-6类，这个类仅在屏幕宽度≥992px（Bootstrap的lg断点）时生效，让它占据一半宽度。当屏幕缩小到md（≥768px）及以下时，这个列没有指定对应的栅格类，再加上列内完全没有内容，它的高度会直接坍缩成0，所以视觉上就“消失”了。

解决方案 #

你可以通过两种方式修复，根据你想要的响应式效果选择：

方案1：所有屏幕尺寸都保持两列布局

给空白列添加全断点的栅格类，同时设置最小高度来撑开空白列（因为没有内容）：

<!-- 修改前的空白列 -->
<div class="col-lg-6 bg-white"> </div>

<!-- 修改后的空白列 -->
<div class="col-6 col-md-6 col-lg-6 bg-white" style="min-height: 500px;"> </div>

• col-6 col-md-6 col-lg-6确保在手机、平板、桌面端都保持一半宽度
• min-height: 500px可以根据你内容列的实际高度调整，保证空白列在所有屏幕下都有高度显示

方案2：小屏幕下堆叠布局，空白列仍保留

如果你希望在平板及以下屏幕让内容列和空白列各占一行，那可以给空白列添加col-12 col-md-12，同时设置最小高度：

<div class="col-lg-6 col-md-12 bg-white" style="min-height: 200px;"> </div>

这样在lg及以上是两列，md及以下空白列占满一行，有高度不会消失。

完整修改后的代码片段示例 #

拿第一个section举例，修改后是这样：

<div class="pokaz">
  <div class="container">
    <div class="row pt-5">
      <div class="col-lg-6 bg-white" style="text-align: center;">
        <!-- 内容部分保持不变 -->
        <svg class="bi bi-gem mt-3" width="3em" height="3em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M3.1.7a.5.5 0 0 1 .4-.2h9a.5.5 0 0 1 .4.2l2.976 3.974c.149.185.156.45.01.644L8.4 15.3a.5.5 0 0 1-.8 0L.1 5.3a.5.5 0 0 1 0-.6l3-4zm11.386 3.785l-1.806-2.41-.776 2.413 2.582-.003zm-3.633.004l.961-2.989H4.186l.963 2.995 5.704-.006zM5.47 5.495l5.062-.005L8 13.366 5.47 5.495zm-1.371-.999l-.78-2.422-1.818 2.425 2.598-.003zM1.499 5.5l2.92-.003 2.193 6.82L1.5 5.5zm7.889 6.817l2.194-6.828 2.929-.003-5.123 6.831z"/>
        </svg>
        <h1 class="font-weight-bold mt-2" style="color: #14747d;">Lorem ipsum</h1>
        <h4 class="font-weight-lighter mt-4 text-break">Lorem ipsum dolor sit amet, 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.</h4>
        <button type="button" class="btn btn-outline-secondary">Czytaj więcej</button>
      </div>
      <!-- 修改后的空白列 -->
      <div class="col-6 col-md-6 col-lg-6 bg-white" style="min-height: 500px;"> </div>
    </div>
  </div>
  <!-- 其他section同理修改空白列 -->
</div>

这样调整后，空白列在任何屏幕尺寸下都会正常显示啦！

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