css - Bootstrap 3 - 对齐卡片

Question

我正在尝试创建包含多个卡片和 map 的 View 。我需要对齐所有元素。我不知道我到底能不能做到这一点， map “破坏”了所有对齐方式。

代码是

   <div class="col-md-12">
            <div class="col-md-8">
              <div class="info-box">
                <span class="info-box-icon bg-green"><i class="fa fa-tint"></i></span>
                <div class="info-box-content">
                  <span class="info-box-text">Último valor ({{ultimoValor ? ultimoValor['timestamp'] :''}})</span>
                  <span class="info-box-number">{{ultimoValor ? ultimoValor['value'] :''}}m³</span>
                </div>
              </div>
            </div>
            <div class="col-md-4">
              <agm-map [fitBounds]="true" [streetViewControl]="true" [fullscreenControl]="false">
                <agm-marker [agmFitBounds]="true" [latitude]="latitud" [longitude]="longitud">
                </agm-marker>
              </agm-map>
            </div>
            <div class="col-md-12">
              <div class="col-md-4">
                <div class="info-box">
                  <span class="info-box-icon bg-aqua"><i class="fa fa-divide"></i></span>
                  <div class="info-box-content">
                    <span class="info-box-text">Media diaria</span>
                    <span class="info-box-number">{{consumoMediaDiaria?consumoMediaDiaria['value']:''}}m³</span>
                  </div>
                </div>
              </div>
              <div class="col-md-4">
                <div class="info-box">
                  <span class="info-box-icon bg-aqua"><i class="fa fa-divide"></i></span>
                  <div class="info-box-content">
                    <span class="info-box-text">Consumo media
                      mes </span>
                    <span class="info-box-number">{{consumoMediaMensual?consumoMediaMensual['value']:''}}m³
                    </span>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-4 pointer">
              <div class="info-box">
                <span class="info-box-icon bg-yellow"><i class="fa fa-calendar"></i></span>
                <div class="info-box-content">
                  <span class="info-box-text">Valor cierre mes
                  </span>
                  <span class="info-box-number">{{ultimoValorCierre? ultimoValorCierre['value']:''}}m³</span>
                </div>
              </div>
            </div>
            <div class="col-md-4 pointer">
              <div class="info-box">
                <span class="info-box-icon bg-yellow"><i class="fa fa-calendar"></i></span>
                <div class="info-box-content">
                  <span class="info-box-text">Consumo último mes
                  </span>
                  <span class="info-box-number">
                    {{consumoUltimoMes ? consumoUltimoMes['value']:''}}m³
                  </span>
                </div>
              </div>
            </div>
            <div class="col-md-12">
              <div class="col-md-6 pointer">
                <div (click)="showAlerts()" class=" info-box">
                  <span class="info-box-icon bg-red"><i class=" fas fa-exclamation-triangle"></i></span>
                  <div class="info-box-content">
                    <span class="info-box-text">Alertas última semana</span>
                    <span class="info-box-number">
                      {{ultimasAlarmasActivas?.length}}
                    </span>
                  </div>
                </div>
              </div>
              <div class="col-md-6">
                <div (click)="showAlerts()" class="info-box pointer">
                  <span [ngClass]="alerts?.length ? 'info-box-icon bg-red icon-alt': 'info-box-icon bg-red'"><i
                      class=" fas fa-exclamation-triangle"></i></span>
                  <div class="info-box-content">
                    <span *ngIf="alerts?.length>0" class="info-box-number">Alertas <b>({{alerts.length}})</b></span>
                    <span *ngIf="alerts?.length==0" class="info-box-text">Alertas
                    </span>
                    <ol *ngIf="alerts?.length>0">
                      <li *ngFor="let alert of alerts | slice:0:5">
                        <div>{{alert.nombre}} </div>
                      </li>
                    </ol>
                    <span *ngIf="alerts?.length==0" class="info-box-number">
                      {{alerts.length}}
                    </span>
                  </div>
                </div>
              </div>
            </div>

这里我们有一个“错误”屏幕。

正如我们所见，卡片在第一个元素之后有一个空格，然后是 map ，最后是所有其他卡片。我需要删除这个空白并对齐所有元素。

Answer 1

你缺少 div-row

<div class="container">
 <div class="row">
  <div class="col-md-12">
   <div class="row">
    <div class="col-md-8">
     Your content in col-8
    </div>
    <div class="col-md-4">
     Your content in col-4
    </div>
   </div><!-- .row -->
  </div><!-- .col-md-12 -->
 </div><!-- .row -->
</div><!-- .container -->