如何根据每行的最长列制作引导列宽？

Question

问题

我有一个包含两列的列表。我的问题是我希望左列从第一列最长列结束的位置开始。目前它在第一个之后立即开始。

我必须做些什么才能使第二列从最长的第一列结束处开始？

外观与我想要的结果

我尝试过的

我尝试在第一列使用 col 并在最后一列使用 col my-auto 的 row-fluid。它确实看起来在一个中等大小的屏幕上。 但在手机等较小的屏幕上，文本会相互重叠。在更大的屏幕上，文本之间的距离也很远。

代码部分的代码片段

<div class="row fluid">
 <div class="col">
   <label id="key" for="object.key"><b>{{object.key}}:</b></label>
  </div>
  <div class="col my-auto">
   <label id="object.key">{{object.value}}</label>
  </div>
</div>

我尝试阅读https://getbootstrap.com/docs/4.0/utilities/flex/ 的文档，但找不到可以解决我的问题的方法。

代码

我在 Angular 中制作了一个简单的 两列数组 组件。我使用引导程序进行样式设置。这个想法是动态显示卡片内的信息列表。

HTML

<ng-container>
  <div class="card">
    <div class="card-header">
      <div class="card-fluid" *ngFor="let object of ListObjects" ng-class-odd='odd'>
        <div class="d-flex">
          <div class="mt-1">
            <label id="key" for="object.key"><b>{{object.key}}:</b></label>
          </div>
          <div class="mt-1">
          <label id="object.key">{{object.value}}</label>
          </div>
        </div>
      </div>
    </div>
  </div>
</ng-container>

Ts

import { Component, Input, OnInit } from '@angular/core';
import { ListTwoColumnObject } from '@models/list-two-column';

@Component({
  selector: 'app-two-column-list',
  templateUrl: './two-column-list.component.html',
  styleUrls: ['./two-column-list.component.css']
})
export class TwoColumnListComponent {
  @Input() ListObjects: ListTwoColumnObject[];
  constructor() { }
}

TwoColumnObject

export class ListTwoColumnObject {
  key: any;
  value: any;

  constructor(key: any, value: any){
    this.key = key;
    this.value = value;
  }
}

创建列表示例

const objList = Array<ListTwoColumnObject>();
 objList.push(new ListTwoColumnObject('Fakturanr.', invoice.invoiceNr));
 objList.push(new ListTwoColumnObject('Betalt', convertBool.transform(invoice.isPaid)));
 objList.push(new ListTwoColumnObject('Ordre opprettet', 
 datePipe.transform(invoice.orderDate,'yyyy.MM.dd')));

Answer 1

为了回应您的评论，“……如果屏幕变小，表格是否会将列相互包裹？我想避免垂直滚动。” — 不，一个表格不会将一行放在另一行下方以适应 — 表格只是变小了，但您只有两列数据，如果您的示例代表您要显示的数据，那么即使是具有 320 像素宽显示屏的旧智能手机。

关于避免垂直滚动，如果你的内容超过屏幕高度，那么显示会滚动。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container" lang="no">
    <div class="row justify-content-center">
        <div class="col-12 col-sm-10 col-md-8 col-lg-6">
            <div class="card">
                <div class="card-body">
                    <table class="table table-borderless">
                        <tbody>
                            <tr>
                                <th scope="row">Fakturanr.:</th>
                                <td>100</td>
                            </tr>
                            <tr>
                                <th scope="row">Betalt:</th>
                                <td>Ja</td>
                            </tr>
                            <tr>
                                <th scope="row">Ordre opprettet:</th>
                                <td>2021.01.06</td>
                            </tr>
                            <tr>
                                <th scope="row">Forfalls Dato:</th>
                                <td>2021.01.16</td>
                            </tr>
                            <tr>
                                <th scope="row">Opprettet av:</th>
                                <td>edit</td>
                            </tr>
                            <tr>
                                <th scope="row">Ordre type:</th>
                                <td>Oppgjort for sent</td>
                            </tr>
                            <tr>
                                <th scope="row">Beløp:</th>
                                <td>450</td>
                            </tr>
                            <tr>
                                <th scope="row">Innbetalt:</th>
                                <td>-450</td>
                            </tr>
                            <tr>
                                <th scope="row">Rest beløp:</th>
                                <td>0</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>