为什么Bootstrap列显示在行下方而非右侧？如何实现两列并排布局

• 栅格行容器配置错误：Bootstrap栅格系统要求所有列的直接父元素必须使用row类才能触发弹性布局，实现列并排效果。你代码中使用的row-sm-1不是合法的栅格行类，因此所有col-*相关的宽度、排列规则都不会生效，两列默认按块级元素上下堆叠，这也是你更换col-lg、col-sm等类都无法解决问题的核心原因。
• 列宽设置不合理：左侧列设置为col-sm-1仅占栅格总宽度的1/12，远小于内部卡片固定的18rem宽度，就算行配置正确也会因为内容溢出导致列换行。

1. 将行容器的类替换为标准row
2. 调整两列的宽度占比，保证总占比为12，可根据实际展示需求分配，比如左侧卡片列占5份、右侧文本列占7份
3. 可选：移除卡片的width: 18rem固定宽度，让卡片自适应所在列的宽度，适配不同屏幕尺寸

{%  extends 'base.html' %}

{% block content %}
<br>

<div class="container">
  <!-- 替换为标准row类 -->
  <div class="row">
    <!-- 调整左侧列宽度占比 -->
    <div class="col-sm-5">
      <!-- 卡片1 -->
      <div class="card" style="width: 18rem;">
        <div class="card-body">
          <h5 class="card-title">联系人</h5>
          <p class="card-text">描述信息</p>
        </div>
        <ul class="list-group list-group-flush">
          <li class="list-group-item">邮箱：</li>
          <li class="list-group-item">电话：</li>
        </ul>
      </div>
      <br><br>
      
      <!-- 卡片2 -->
      <div class="card" style="width: 18rem;">
        <-- 同上 -->
      </div>
      <br><br>

      <!-- 卡片3 -->
      <div class="card" style="width: 18rem;">
        <-- 同上 -->
      </div>
      <br><br>

    </div>

    <!-- 第二列，调整宽度占比和左侧总和为12 -->
    <div class="col-sm-7">
      <h1>测试</h1>
    </div>
  </div>
</div>
  

<br><br><br>

{% endblock %}

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