如何在行中使用相同的高度来保持网站的响应速度？例如，我有两个x_panel，里面有行和列，但高度不同，我尝试使用display flex，但它更改了列内...
这是一段代码，让您了解我尝试做的事情：
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="x_panel tile">
<div class="x_content">
<div class="row x_title">
<h3>Ponto de Venda:<small id="node_name"></small></h3>
</div>
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="col-md-5 col-sm-5 col-xs-12">
<h5>Período de Avaliação:</h5>
</div>
<div class="col-md-7 col-sm-7 col-xs-12">
<div id="reportrange" class="pull-right" style="background: #fff; cursor: pointer; padding: 5px 10px; width: 100%; text-align: center; border: 1px solid #ccc">
<i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
<span id="grafico_medias"></span> <b class="caret"></b>
</div>
</div>
</div>
</div>
<div class="row tile_count text-center">
<div class="col-md-4 col-sm-12 col-xs-12 tile_stats_count">
<span class="count_top"><i class="fa fa-user"></i> Total de Pedestres</span>
<div id="displayPedestres" class="count"></div>
</div>
<div class="col-md-4 col-sm-12 col-xs-12 tile_stats_count">
<span class="count_top"><i class="fa fa-eye"></i> Visualizações</span>
<div id="displayInteracoes" class="count"></div>
</div>
<div class="col-md-4 col-sm-12 col-xs-12 tile_stats_count">
<span class="count_top"><i class="fa fa-refresh"></i> Taxa de Conversão</span>
<div id="displayTaxa" class="count green"></div>
</div>
</div>
</div>
</div>
</div>
<!-- /Informacoes medias -->
<!-- Meta -->
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="x_panel tile">
<div class="x_content">
<div class="row x_title">
<h3>Meta</h3>
</div>
<div class="col-md-7 col-sm-12 col-xs-12">
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-6">
<h5>Meta do</h5>
</div>
<div class="col-md-9 col-sm-6 col-xs-6" style="text-align: right">
<select id="metaPeriodo" onchange="meta()" class="pull-right" style="background: #fff; cursor: pointer; padding: 5px 10px; width: 100%; text-align: center; border: 1px solid #ccc">
<option>dia</option>
<option>mês</option>
<option>trimestre</option>
</select>
</div>
</div>
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-6">
<h5>em</h5>
</div>
<div class="col-md-9 col-sm-6 col-xs-6" style="text-align: right">
<select id="metaVariavel" class="pull-right" style="background: #fff; cursor: pointer; padding: 5px 10px; width: 100%; text-align: center; border: 1px solid #ccc" id="tipo_meta" onclick="meta()">
<option>pedestres</option>
<option>visualizações</option>
<option>taxa de conversão</option>
</select>
</div>
</div>
<br>
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<input id="metaInput" type="text" class="form-control has-feedback" placeholder="Insira aqui a meta" style="height: 68px; font-size: 40px; font-weight: 600; color: #73879C; text-align: center">
</div>
</div>
</div>
<div class="col-md-5 col-sm-12 col-xs-12">
<div class="row">
<div class="sidebar-widget text-center">
<h4 style="text-align: center;">Cumprimento da Meta</h4>
<canvas width="140" height="80" id="foo" class="" style="width: 150px; height: 100px;"></canvas>
<div class="goal-wrapper" style="text-align: center;">
<span class="gauge-value pull-center"></span>
<span id="gauge-text" class="gauge-value pull-center"></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /Meta -->
</div>
我想＆＃34;同步＆＃34;这两个高度相同的列与屏幕的大小无关，你能帮助我吗？
修改
小提琴：https://jsfiddle.net/5nzcpj3s/
我正在使用带有gentelella布局的Bootstrap
答案 0 :(得分：0)
我添加了新的CSS类，以便更容易理解。
你必须使用边距来改善它。
你的弹箱概念很好。我猜你也错过了将.so-col-1设为display: flex;的费用。
Boa sorte！ =]
答案 1 :(得分：0)
使用flex-box并添加一个css类：
<div class="row flexit">...</div>
.flexit {
display:flex;
}
.flexit > div {
flex:1;
}