Boostrap 3-对齐卡
我正在尝试创建包含多张卡片和地图的视图。我需要对齐所有元素。我不知道该怎么做，地图会“打破”所有对齐方式。
代码是
<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>
在这里，我们有一个'错误'屏幕。
我们可以看到，卡片的第一个元素后有一个空格，然后是地图，最后是所有其余的卡片。我需要删除此空白并对齐所有元素。
2 个答案:
答案 0 :(得分：1)
您缺少div行
<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 -->
答案 1 :(得分：0)
您需要使用类'row'来获得所需的效果-检查下面的代码，其中有内部/外部框的额外边框，以便您可以识别正在发生的情况并进行相应的更改
在以下Bootstrap v3上运行代码段：
.info-box {
border: 1px solid red;
}
.top-level {
border: 1px solid blue;
} <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div class="container">
<div class='row'>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-12 top-level">
<div class='row'>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<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>
<div class='row'>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<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-lg-6 col-md-6 col-sm-6 col-xs-12">
<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 class="col-lg-6 col-md-6 col-sm-6 col-xs-12 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-lg-6 col-md-6 col-sm-6 col-xs-12 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>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 top-level">
<agm-map [fitBounds]="true" [streetViewControl]="true" [fullscreenControl]="false">
<agm-marker [agmFitBounds]="true" [latitude]="latitud" [longitude]="longitud">
</agm-marker>
</agm-map>
</div>
</div>
</div>
<div class="container">
<div class='row'>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 top-level">
<!-- another-->
<div class='row'>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 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-lg-6 col-md-6 col-sm-6 col-xs-12 pointer">
<div (click)="showAlerts()" class="info-box ">
<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>
</div>
</div>
</div>
在下面的Bootstrap v4上运行片段：
.info-box {
border: 1px solid red;
}
.top-level {
border: 1px solid blue;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container">
<div class='row'>
<div class="col-lg-8 col-md-8 col-sm-8 col-12 top-level">
<div class='row'>
<div class="col-lg-12 col-md-12 col-sm-12 col-12">
<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>
<div class='row'>
<div class="col-lg-6 col-md-6 col-sm-6 col-12">
<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-lg-6 col-md-6 col-sm-6 col-12">
<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 class="col-lg-6 col-md-6 col-sm-6 col-12 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-lg-6 col-md-6 col-sm-6 col-12 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>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-12 top-level">
<agm-map [fitBounds]="true" [streetViewControl]="true" [fullscreenControl]="false">
<agm-marker [agmFitBounds]="true" [latitude]="latitud" [longitude]="longitud">
</agm-marker>
</agm-map>
</div>
</div>
</div>
<div class="container">
<div class='row'>
<div class="col-lg-12 col-md-12 col-sm-12 col-12 top-level">
<!-- another-->
<div class='row'>
<div class="col-lg-6 col-md-6 col-sm-6 col-12 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-lg-6 col-md-6 col-sm-6 col-12 pointer">
<div (click)="showAlerts()" class="info-box ">
<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>
</div>
</div>
</div>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？