Bootstrap диапазон строк не выровнен сверху

Question

I need the boxes aligned at right also vertically aligned with the first box at left, but now these boxes are only aligned with the last vertical box at the left. How can I achieve that?

starter.component.html code:

 Carregando informaçães do приборная панель ...     {{item.nome}}  {{item.saldo | валюта: 'BRL': 'symbol': '1.2-2': 'pt'}}      

starter-detalhes-titulos .component. html

<div class="col-lg-12 col-md-12 col-sm-12">
    <div class="card">
        <div class="card-body">
            <div class="d-flex no-block">
                <div>
                    <h4 class="card-title"><span style="background: #56c0d8;" class="lstick"></span>T&iacute;tulos a {{ tipo === 0 ? 'receber' : 'pagar'}} nos pr&oacute;ximos 10 dias</h4>
                </div>
            </div>

            <div class="table-responsive m-t-20" *ngIf="titulos.length > 0">
                <table class="table vm no-th-brd pro-of-month">
                    <thead>
                        <tr>
                            <th>N&uacute;mero</th>
                            <th class="text-center">Emiss&atilde;o</th>
                            <th class="text-center">Vencimento</th>
                            <th class="text-right">Valor</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let item of titulos">
                            <td><span class="p-1 text-white font-weight-bold rounded small vitai-bg-color">{{ item.numero }}</span></td>
                            <td class="text-center">{{ item.emissao | date:"dd/MM/yyyy" }}</td>
                            <td class="text-center">{{ item.vencimento | date:"dd/MM/yyyy" }}</td>
                            <td class="text-right text-info" *ngIf="item.natureza === 0">{{ item.valor | currency:'BRL':'symbol':'1.2-2':'pt' }}</td>
                            <td class="text-right text-danger" *ngIf="item.natureza === 1">- {{ item.valor | currency:'BRL':'symbol':'1.2-2':'pt' }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <div class="table-responsive m-t-20" *ngIf="titulos.length === 0">
                <table class="table vm no-th-brd pro-of-month">
                    <tbody>
                        <tr>
                            <td class="text-center" *ngIf="loading">Carregando t&iacute;tulos a {{ tipo === 0 ? 'receber' : 'pagar'}} nos pr&oacute;ximos dez dias.</td>
                            <td class="text-center" *ngIf="!loading">Nenhum t&iacute;tulo a {{ tipo === 0 ? 'receber' : 'pagar'}} encontrado nos pr&oacute;ximos dez dias.</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

EDIT:

Если я изменю код starter.component. html на:

<div class="card" *ngIf="loading"><div class="card-body pt-0"><div class="k-i-loading">Carregando informa&ccedil;&atilde;es do dashboard...</div></div></div>

<div class="row" *ngxPermissionsOnly="['GERENTE_FINANCEIRO', 'ADMINISTRATIVO_FINANCEIRO']">
    <div class="col-lg-8 col-md-8 col-sm-8">
        <detalhes-titulos [titulos]="titulosDespesaData" [tipo]="DESPESA" [loading]="loading"></detalhes-titulos>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-4">
        <div *ngFor="let item of contasData" class="card col-lg-12 col-md-12 col-sm-12">
            <div class="card-body">
                <h6 class="text-muted m-t-10 m-b-0"><span style="background: #56c0d8;" class="lstick"></span>{{ item.nome }}</h6>
                <h2 [ngClass]="{'text-info': item.saldo > 0, 'text-danger': item.saldo < 0}">{{ item.saldo | currency:'BRL':'symbol':'1.2-2':'pt' }}</h2>
            </div>
        </div>
    </div>
    <div class="col-lg-8 col-md-8 col-sm-8">
        <detalhes-titulos [titulos]="titulosDespesaData" [tipo]="DESPESA" [loading]="loading"></detalhes-titulos>
    </div>
</div>

Я получаю следующий макет, который может быть почти тем, что я хочу:

введите описание изображения здесь

Теперь мне нужно второе поле слева ближе к первому.

Answer 1

Что ж, вам нужно определить, что вы хотите здесь.

Просто поместите верхнее левое поле и нижнее левое поле в столбец 8/12 и эти маленькие прямоугольники справа в столбце 4/12 исправит вашу проблему:

<div class="row">
    <div class="col-sm-8">
        <detalhes-titulos [titulos]="titulosDespesaData" />
        <detalhes-titulos [titulos]="titulosDespesaData" />
    </div>
    <div class="col-sm-4">
        <div *ngFor="" class="card">
            ...
        </div>
    </div>
</div>

Но я не знаю, хотите ли вы этого, особенно вы не определили, что вы хотите для разных точек останова.