0
Wie kann ich die gleiche Höhe in der Zeile verwenden, die die Website reaktionsfähig hält? Zum Beispiel habe ich zwei x_panel mit Zeilen und Spalten im Inneren, aber die Höhe ist anders, ich habe versucht, Display flex, aber es innerhalb Spalten wechseln ...Gleiche Höhe in Reihe?
Hier ist ein Code, um zu verstehen, was ich versuche zu tun:
<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>ich möchte „sync“ diese zwei Spalten mit der gleichen Höhe, die Größe des Bildschirms spielt keine Rolle, können Sie mir helfen?
EDIT
Geige: https://jsfiddle.net/5nzcpj3s/
Ich bin mit Bootstrap mit gentelella Layout
können Sie eine Geige einrichten? –
können Sie mit Ihrem CSS klären? Ich habe Ihren HTML-Code mit der Bootstrap-Bibliothek verknüpft, oder? –
Entschuldigung, ich habe eine Bearbeitung hinzugefügt, um den Code –