如何使用CSS Bootstrap网格实现固定左列场景下的视频尺寸响应式适配？

核心问题原因 #

• 左列字幕容器未设置flex-shrink: 0，窗口缩小时会被flex布局挤压，无法保持固定宽度
• 给video设置的百分比宽是相对于父容器宽度，不是视频自身原始宽度，导致min-width/max-width规则不符合预期
• .container设置min-width: 100%，窗口宽度小于内容总宽度时不会触发横向滚动，反而会挤压内部元素
• 右列视频容器未适配flex布局的自适应规则，宽度计算逻辑错误

修改说明 #

1. 左列.caps-container添加flex-shrink: 0强制固定宽度
2. 假设你的视频原始宽度为1000px，请替换为你实际的视频原始宽度：
   • 视频最小宽度 = 原始宽度 * 80% = 800px
   • 视频最大宽度 = 原始宽度 * 120% = 1200px
   • 容器最小总宽度 = 左列宽度550px + 视频最小宽度800px = 1350px
3. .container添加overflow-x: auto，修改min-width为计算得到的总最小宽度
4. 右列.player-container去掉width: 100%与bootstrap自带的col类，添加flex: 1实现自适应填充剩余宽度，设置min-width等于视频最小宽度
5. video标签添加width: 100%保证自适应，修改min-width/max-width为计算得到的固定值

修改后完整代码 #

HTML代码 #

<body>
    <div class="container displayer-container">
      <div class="row top-row">
        <!-- Some content in the top row. -->
      </div>
      <div class="row flex-nowrap mid-row">
        <div class="caps-container">
          <div class="cap-list">
            <!-- 字幕列表内容 -->
          </div>
        </div>
        <div class="player-container">
          <div class="video">
            <video controls>
              <source src="some_video.mp4" type="video/mp4">
            </video>
          </div>
        </div>
      </div>
      <div class="row bottom-row">
        <!-- Some content in the bottom row.-->
      </div>
    </div>
  </body>

CSS代码 #

html {
  width: 100%;
  height: 100%;
}

body {
  background-color: white;
  min-width: 100%;
  min-height: 100%;
  padding: 0 1%;
  margin: 0;
}

.container {
  width: 100%;
  height: 100%;
  margin: 0;
  /* 替换为你计算得到的总最小宽度 */
  min-width: 1350px;
  border: 1px solid yellow;
  overflow-y: scroll;
  overflow-x: auto;
}

.mid-row {
 border: 1px solid green;
}

.caps-container {
  width: 550px;
  height: 550px;
  overflow-y: scroll;
  /* 固定宽度不被挤压 */
  flex-shrink: 0;
}

.player-container {
  border: 1px solid red;
  /* 自适应填充flex剩余宽度 */
  flex: 1;
  /* 替换为你的视频最小宽度 */
  min-width: 800px;
}

.video {
  border: 1px solid blue;
  width: 100%;
  height: auto;
}

video {
  width: 100%;
  height: auto;
  /* 替换为你的视频最小、最大宽度 */
  min-width: 800px;
  max-width: 1200px;
}

补充说明 #

如果你的视频尺寸不固定，可通过JS动态设置宽限制，示例代码如下：

const video = document.querySelector('video');
video.addEventListener('loadedmetadata', () => {
  const originWidth = video.naturalWidth;
  video.style.minWidth = `${originWidth * 0.8}px`;
  video.style.maxWidth = `${originWidth * 1.2}px`;
  document.querySelector('.player-container').style.minWidth = `${originWidth * 0.8}px`;
  document.querySelector('.container').style.minWidth = `${550 + originWidth * 0.8}px`;
})

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