Bootstrap 4: большое поле справа от col-md-6 div

Question

Я пишу приложение на Angular с Bootstrap 4. Я пытаюсь заставить два стандартных div-столбца col-md-6 появляться рядом друг с другом. Первый содержит таблицу, а второй содержит ту белую линию, которую вы видите ниже. Я осмотрел один из них, и оказалось, что справа от элемента есть большое поле, как на скриншоте. Изменение маржи в инструментах разработчика не имеет никакого эффекта. Кто-нибудь знает, почему это происходит?

<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!