使用Bootstrap 4.4.1栅格无法实现内容横向排列的问题求助

我需要将页面内容设置为横向排列，但实际呈现效果不符合预期。

不理想的效果 #

期望的效果 #

使用Bootstrap 4.4.1

尝试用栅格系统调整但没有变化，我的代码如下：

<body>
  <div style="margin-left: 72%;">
    <table>
      <thead>
        <tr>
          <th class="font-weight-bold textleft">Print Date: </th>
          <td><span class="font-weight-light"> @DateTime.Now</span></td>
        </tr>
        <tr>
          <th class="font-weight-bold textleft">Print at: </th>
          <td><span class="font-weight-light textleft"> @getLoginProp.BranchName</span></td>
        </tr>
        <tr>
          <th class="font-weight-bold textleft">Print by: </th>
          <td><span class="font-weight-light textleft"> @getLoginProp.UserName</span></td>
        </tr>
      </thead>
    </table>
  </div>

  <h3>@Model.BranchName</h3>
  <h2>Purchase Receive</h2>
</body>

你当前代码里标题和表格是上下分布的，要实现横向并排的效果，用Bootstrap 4的栅格系统就能解决，具体修改如下：

<body>
  <div class="container-fluid">
    <div class="row align-items-center">
      <!-- 左侧标题区 -->
      <div class="col">
        <h3>@Model.BranchName</h3>
        <h2>Purchase Receive</h2>
      </div>
      <!-- 右侧表格区 -->
      <div class="col-auto">
        <table>
          <thead>
            <tr>
              <th class="font-weight-bold textleft">打印日期: </th>
              <td><span class="font-weight-light"> @DateTime.Now</span></td>
            </tr>
            <tr>
              <th class="font-weight-bold textleft">打印地点: </th>
              <td><span class="font-weight-light textleft"> @getLoginProp.BranchName</span></td>
            </tr>
            <tr>
              <th class="font-weight-bold textleft">打印人: </th>
              <td><span class="font-weight-light textleft"> @getLoginProp.UserName</span></td>
            </tr>
          </thead>
        </table>
      </div>
    </div>
  </div>
</body>

核心修改说明： #

• 用.container-fluid包裹整体内容，确保Bootstrap栅格规则生效
• 添加.row创建行容器，.align-items-center让左右内容垂直居中对齐
• 左侧用.col占据剩余宽度，右侧用.col-auto根据表格内容自动适配宽度，替代原代码中硬编码的margin-left:72%，布局更灵活
• 移除了原有的行内边距样式，改用栅格系统实现横向排版

这样调整后，标题和表格就会横向并排，符合你期望的效果。

内容的提问来源于stack exchange，提问作者Bilal-96