如何正确实现目标HTML布局？当前布局不符预期求排查问题

我看了你的需求和当前代码，你想要实现的是两列并排的布局，但现在所有内容都垂直堆叠在一起，核心问题出在你没有利用Bootstrap栅格系统的列容器来拆分内容：

Bootstrap的栅格布局是靠.row + .col的组合实现的，.row是行容器，里面的.col类元素会自动横向排列。但你原来的代码里，所有标题和段落都直接放在了.row下面，没有包裹到独立的列容器中，所以它们只能在同一列里垂直堆叠。

修正后的HTML代码 #

<div class="container">
  <div class="row">
    <!-- 第一列内容 -->
    <div class="col-md-6">
      <h6 class="font-weight-bold">Title</h6>
      <p><strong>Name:</strong> John</p>
      <p><strong>Email:</strong> emailtest...</p>
    </div>
    <!-- 第二列内容 -->
    <div class="col-md-6">
      <h6 class="font-weight-bold">User 1</h6>
      <p><strong>Name:</strong> John</p>
      <p><strong>Surname:</strong> Y</p>
      <p><strong>Email:</strong>emailtest...</p>
    </div>
  </div>
</div>

补充说明 #

• 使用.col-md-6表示在中等屏幕（≥768px）及以上时，两列各占一半宽度；小屏幕下会自动堆叠成一列，符合响应式设计。
• 如果希望所有屏幕尺寸下都保持两列并排，可以把.col-md-6换成.col-6。

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