2017-01-17 94 views
0

如何在行中使用相同的高度以保持網站的響應?例如,我有兩個x_panel裏面的行和列,但高度是不同的,我試圖使用顯示器的flex,但它在列內更改...同一行高度?

這是一個代碼,你明白我想要做的:

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
    <div class="row"> 
 
\t <div class="col-md-6 col-sm-6 col-xs-12"> 
 
\t \t <div class="x_panel tile"> 
 
\t \t \t <div class="x_content"> 
 
\t \t \t \t <div class="row x_title"> 
 
\t \t \t \t \t <h3>Ponto de Venda:<small id="node_name"></small></h3> \t \t \t \t \t \t \t 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="row"> 
 
\t \t \t \t \t <div class="col-md-12 col-sm-12 col-xs-12"> \t 
 
\t \t \t \t \t \t <div class="col-md-5 col-sm-5 col-xs-12"> 
 
\t \t \t \t \t \t \t <h5>Período de Avaliação:</h5> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <div class="col-md-7 col-sm-7 col-xs-12"> 
 
\t \t \t \t \t \t \t <div id="reportrange" class="pull-right" style="background: #fff; cursor: pointer; padding: 5px 10px; width: 100%; text-align: center; border: 1px solid #ccc"> 
 
\t \t \t \t \t \t \t \t <i class="glyphicon glyphicon-calendar fa fa-calendar"></i> 
 
\t \t \t \t \t \t \t \t <span id="grafico_medias"></span> <b class="caret"></b> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="row tile_count text-center"> 
 
\t \t \t \t \t <div class="col-md-4 col-sm-12 col-xs-12 tile_stats_count"> 
 
\t \t \t \t \t \t <span class="count_top"><i class="fa fa-user"></i> Total de Pedestres</span> 
 
\t \t \t \t \t \t <div id="displayPedestres" class="count"></div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="col-md-4 col-sm-12 col-xs-12 tile_stats_count"> 
 
\t \t \t \t \t \t <span class="count_top"><i class="fa fa-eye"></i> Visualizações</span> 
 
\t \t \t \t \t \t <div id="displayInteracoes" class="count"></div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="col-md-4 col-sm-12 col-xs-12 tile_stats_count"> 
 
\t \t \t \t \t \t <span class="count_top"><i class="fa fa-refresh"></i> Taxa de Conversão</span> 
 
\t \t \t \t \t \t <div id="displayTaxa" class="count green"></div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
\t <!-- /Informacoes medias --> 
 
    
 
\t <!-- Meta --> 
 
\t <div class="col-md-6 col-sm-6 col-xs-12"> 
 
\t \t <div class="x_panel tile"> 
 
\t \t \t <div class="x_content"> 
 
\t \t \t \t <div class="row x_title"> 
 
\t \t \t \t \t <h3>Meta</h3> \t \t \t \t \t \t \t 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="col-md-7 col-sm-12 col-xs-12"> 
 
\t \t \t \t \t <div class="row"> \t \t 
 
\t \t \t \t \t \t <div class="col-md-3 col-sm-6 col-xs-6"> \t \t \t \t \t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t <h5>Meta do</h5> 
 
\t \t \t \t \t \t </div> \t \t \t \t \t \t \t \t \t 
 
\t \t \t \t \t \t <div class="col-md-9 col-sm-6 col-xs-6" style="text-align: right"> 
 
\t \t \t \t \t \t \t <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"> 
 
\t \t \t \t \t \t \t \t <option>dia</option> 
 
\t \t \t \t \t \t \t \t <option>mês</option> 
 
\t \t \t \t \t \t \t \t <option>trimestre</option> 
 
\t \t \t \t \t \t \t </select> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="row"> 
 
\t \t \t \t \t \t <div class="col-md-3 col-sm-6 col-xs-6"> \t 
 
\t \t \t \t \t \t \t <h5>em</h5> 
 
\t \t \t \t \t \t </div> \t 
 
\t \t \t \t \t \t <div class="col-md-9 col-sm-6 col-xs-6" style="text-align: right"> 
 
\t \t \t \t \t \t \t <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()"> 
 
\t \t \t \t \t \t \t \t <option>pedestres</option> 
 
\t \t \t \t \t \t \t \t <option>visualizações</option> 
 
\t \t \t \t \t \t \t \t <option>taxa de conversão</option> 
 
\t \t \t \t \t \t \t </select> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <br> 
 
\t \t \t \t \t <div class="row"> 
 
\t \t \t \t \t \t <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> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="col-md-5 col-sm-12 col-xs-12"> 
 
\t \t \t \t \t <div class="row"> 
 
\t \t \t \t \t \t <div class="sidebar-widget text-center"> 
 
\t \t \t \t \t \t \t <h4 style="text-align: center;">Cumprimento da Meta</h4> 
 
\t \t \t \t \t \t \t <canvas width="140" height="80" id="foo" class="" style="width: 150px; height: 100px;"></canvas> 
 
\t \t \t \t \t \t \t <div class="goal-wrapper" style="text-align: center;"> 
 
\t \t \t \t \t \t \t \t <span class="gauge-value pull-center"></span> 
 
\t \t \t \t \t \t \t \t <span id="gauge-text" class="gauge-value pull-center"></span> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> \t \t \t \t \t 
 
\t <!-- /Meta --> 
 
</div>

我想「同步」這兩個列具有相同的高度不要緊屏幕尺寸,你能幫我嗎?

編輯

小提琴:https://jsfiddle.net/5nzcpj3s/

我使用的引導與gentelella佈局

+0

你可以建立一個小提琴? –

+0

你能澄清你的CSS嗎?我把你的HTML鏈接到引導庫,是嗎? –

+0

對不起,我添加了一個編輯,你看代碼 –

回答

0

https://jsfiddle.net/frd28kk0

我增添了新的CSS類,只是爲了更容易理解。

你必須玩弄邊緣才能讓它變得更好。

你的柔性箱的想法很好。我想你只是錯過了設置.so-col-1display: flex;以及。

蟒蛇排序! =]

+0

我添加了顯示:flex;到so-col-2,現在正在以相同的尺寸完美地工作!非常感謝你幫助我的noob問題hahaha –