Bootstrap 4：col-md-6 div右边的大边距

Question

我正在使用Bootstrap 4在Angular中编写应用程序。我试图让两个标准的col-md-6 div并排出现。第一个包含表格，第二个包含您在下面看到的白线。我检查了其中一个，看起来div的右边有一个很大的边距，如截图所示。更改开发人员工具中的边距无效。任何人都知道为什么会这样吗？

<div class="mainPanel">
  <app-navbar></app-navbar>
  <app-sidebar-cmp></app-sidebar-cmp>

  <div class="dash-component">
    <div class="details-layout">
      <h2>Study Detail: {{study.title}}</h2>
      <!-- table -->
      <div class="col-md-12">
        <div class="col-md-6">
          <div class="card-body light-table table-responsive">
          <table class="table table-striped table-hover">
            <tbody>
              <tr>
                <td>Title:</td>
                <td>{{study.title}}</td>
              </tr>
              <tr>
                <td>Date:</td>
                <td>{{study.dateTime}}</td>
              </tr>
              <tr>
                <td>Date Received:</td>
                <td>{{study.receivedDateTime}}</td>
              </tr>
              <tr>
                <td>Scanner:</td>
                <td (click)="viewScanner(study.scanner._id)">{{study.scanner.name}}</td>
              </tr>
              <tr>
                <td>Modality:</td>
                <td>{{study.modality}}</td>
              </tr>
            </tbody>
          </table>
        </div>
        </div>
        <!-- images -->
        <div class="col-md-6">
          <div *ngFor="let image of image" class="col-md-12">

          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

  

认为您可能想要使用而不是col-md-12

这解决了它。谢谢@penleychan！