Bootstrap栅格布局col-md-6列异常换行无法同行并排问题

你的布局失效是HTML语法错误+栅格使用不规范共同导致的，按影响优先级排序：

• 两个.col-md-6列元素之间直接插入了独立的<br>标签：Bootstrap的.row是flex布局容器，直接放在row下、不属于col类的子元素会打破flex排版流，强制把后面的列挤到下一行，这是最直接的换行原因。
• HTML标签未闭合：两处<a class="portfolio-box">标签都没有写对应的</a>闭合标签，浏览器解析DOM时会出现层级错乱，导致栅格规则无法正常匹配。
• 无效属性/重复标识问题：
  • img标签重复写了两次class属性，后面的class会覆盖前面的，导致img-fluid的响应式规则失效，图片可能超出列宽撑破容器
  • 两个内容容器都用了相同的id="portfolio"，HTML规范要求同页面id必须唯一，会导致DOM解析异常
• 自定义样式冲突风险：你自定义的w-80、w-101类如果设置了超出容器的固定宽度、额外左右margin，会让栅格列总宽度超过row的100%宽度，触发自动换行。
• 响应式断点规则：col-md-6仅在视口宽度≥768px时才会并排显示，视口小于这个宽度时列默认堆叠是Bootstrap的正常设计，如果需要小屏幕也保持两栏，把类改成col-6即可。

<div class="container-fluid w-80">
  <div class="row">
    <div class="col-md-6">
      <br>
      <h4 style="color:black;">3D Prikaz</h4>
      <div class="divider-new">
        <span></span>
      </div>
      <div id="portfolio">
        <a class="portfolio-box" href="assets/img/proba/27.jpg">
          <img class="img3d img-fluid w-100 h-100" src="assets/img/proba/27.jpg">
        </a>
      </div>
    </div>
    <div class="col-md-6">
      <br>
      <h4 style="color:black;">3D Prikaz</h4>
      <div class="divider-new">
        <span></span>
      </div>
      <div id="portfolio-second">
        <a class="portfolio-box" href="assets/img/proba/27.jpg">
          <img class="img3d img-fluid w-100 h-100" src="assets/img/proba/27.jpg">
        </a>
      </div>
    </div>
  </div>
</div>

• 先确认页面正确引入了Bootstrap的CSS资源，未引入时所有栅格类都不会生效
• 检查自定义w-80类的样式，不要添加左右外边距，宽度建议用百分比设置，避免固定像素宽度在不同屏幕下溢出
• 移除无效的w-101类，宽度超出100%的元素会直接撑破父列容器触发换行

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