如何使用Bootstrap v.3在多设备间维持一致的网格布局？

嘿，我来帮你搞定这个布局问题！先看你当前代码里的小问题：你给每个视频容器都用了col-md-7 col-lg-7 col-sm-7 col-xs-7，两个这样的容器加起来总宽度是14列，可Bootstrap 3的网格系统是基于12列的，这会导致第二个视频在所有设备上都被挤到下一行，根本没法实现并排效果。要保持多设备布局一致，得调整列宽，让每一行的总列数刚好凑够12。

优化后的代码示例 #

<div class="row">
  <!-- 第一个视频容器：全设备下和第二个视频各占一半宽度 -->
  <div class="col-xs-6" id="introduction">
    <p>本项目采用Machine Learning识别垃圾物品，下方视频将简要介绍Machine Learning技术。</p>
    <!-- 响应式视频容器，避免小设备上视频溢出 -->
    <div class="embed-responsive embed-responsive-16by9">
      <iframe class="embed-responsive-item" src="你的YouTube视频链接" allowfullscreen></iframe>
    </div>
  </div>

  <!-- 第二个视频容器：和第一个容器宽度完全匹配 -->
  <div class="col-xs-6" id="demo-video">
    <p>下方视频展示垃圾物品识别的实际演示效果。</p>
    <div class="embed-responsive embed-responsive-16by9">
      <iframe class="embed-responsive-item" src="第二个YouTube视频链接" allowfullscreen></iframe>
    </div>
  </div>
</div>

关键优化点说明 #

• 列宽合规性：把列类统一改成col-xs-6，两个容器加起来刚好12列，从手机到桌面的所有设备上都能稳定并排。如果想在桌面端调整比例（比如5:7分配），可以写成col-xs-6 col-md-5和col-xs-6 col-md-7，这样移动端保持各占一半，桌面端按需求分配，同时总列数始终符合12列规则。
• 响应式视频嵌入：用embed-responsive系列类包裹YouTube的iframe，视频会自动适配容器宽度，不会在小设备上出现溢出或滚动条，进一步强化布局一致性。
• 简化冗余代码：Bootstrap 3的网格类是向下兼容的，只要写了最小屏幕的col-xs-6，更大屏幕的类可以省略，代码会自动继承这个宽度设置。

这样修改后，你的两个YouTube视频就能在所有设备上维持一致的并排布局啦！

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