Bootstrap同row内col无法横向对齐问题求助

嘿，我看到你的问题了——用了col-md-5但两列还是上下堆叠，核心问题出在Bootstrap栅格系统的行容器使用错误上，咱们一步步来修复：

问题根源 #

Bootstrap的栅格布局要求列的直接父容器必须是带有row类的元素（而非id），它会通过内置的CSS规则来管理列的横向排列。你写的<div id="row">无法触发Bootstrap的栅格布局逻辑，所以列会默认以块级元素形式上下排列。

修改方案 #

1. 把行容器的id="row"改成class="row"，这是触发栅格布局的核心
2. 可选优化：给行添加align-items-center类，让同一行的列内容垂直对齐；给列添加mx-auto，让它们在容器中居中（两个col-md-5总宽度占10/12，剩余空间刚好用来居中）

修改后的HTML代码 #

<section id="testimonials">
  <div class="container">
    <h1 class="title text-center">What our clients say</h1>
    <!-- 替换id为row类，添加align-items-center实现垂直对齐 -->
    <div class="row align-items-center">
      <!-- 添加mx-auto让列居中分布 -->
      <div class="col-md-5 testimonials mx-auto">
        <p>We deal in specializations such as Web Development, Digital Marketing and Graphic Designing. Your one stop to all your technical needs.</p>
        <img src="images/user1.jpg">
        <p class="user-details"><b>Angelina Green</b><br>Co-founder at xyz</p>
      </div>
      <div class="col-md-5 testimonials mx-auto">
        <p>We deal in specializations such as Web Development, Digital Marketing and Graphic Designing. Your one stop to all your technical needs.</p>
      </div>
    </div>
  </div>
</section>

你的CSS代码可保持不变（按需微调） #

#testimonials {
  margin: 100px 0px;
}
.testimonials {
  border-left: 4px solid #7b1798;
  margin-top: 50px;
  margin-bottom: 50px;
}
.testimonials img {
  height: 60px;
  width: 60px;
  border-radius: 50%;
  margin: 0px 10px;
}
.user-details {
  display: inline-block;
  font-size: 12px;
}

关键知识点 #

• Bootstrap栅格的标准结构是：container → row → col-*，三者层级关系不能错
• row类自带负margin，用来抵消列的默认padding，保证列之间的间距和横向排列正常
• align-items-center可以让同一行内的所有列在垂直方向上居中对齐，适配内容高度不一致的场景

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