Estou tentando alinhar os gráficos dentro da div
a partir da classe alinha-chart
mas sem sucesso. Quando coloco um left: 33%
e right: 33%
ele fica centralizado, mas como esperado, zoa no mobile. Poderiam me ajudar?
Segue meu código HTML **editado:
<div class="portlet-body row">
<div class="col-lg-12">
<h3 class="nome-rv"><i class="fa fa-user"></i> <?=$_SESSION['
</div>
<div class="col-lg-4 col-sm-12">
<table class="table table-bordered tabela-meta">
<tbody>
<tr>
<td class="grafico-situacao">
<div class="c100 p100 orange big">
<span>100%</span>
<div class="slice">
<div class="bar"></div>
<div class="fill"></div>
</div>
</div>
</td>
</tr>
<tr>
<td>PISO</td>
</tr>
<tr>
<td>3.500</td>
</tr>
</tbody>
</table>
</div>
<div class="col-lg-4 col-sm-12">
<table class="table table-bordered tabela-meta">
<tbody>
<tr>
<td class="grafico-situacao">
<div class="c100 p82 big">
<span>82%</span>
<div class="slice">
<div class="bar"></div>
<div class="fill"></div>
</div>
</div>
</td>
</tr>
<tr>
<td>META</td>
</tr>
<tr>
<td>3.500</td>
</tr>
</tbody>
</table>
</div>
<div class="col-lg-4 col-sm-12">
<table class="table table-bordered tabela-meta">
<tbody>
<tr>
<td class="grafico-situacao">
<div class="c100 p63 green big">
<span>63%</span>
<div class="slice">
<div class="bar"></div>
<div class="fill"></div>
</div>
</div>
</td>
</tr>
<tr>
<td>SUPERMETA</td>
</tr>
<tr>
<td>3.500</td>
</tr>
</tbody>
</table>
</div>
</div>
col-sm-12
-> esse cara indica que em telas menores adiv
ocupará a linha toda, acredito que seja isso. (getbootstrap.com/examples/grid) Dá uma sacada nesse link e vê se ajuda. – rLinhares 12/01/17 às 18:22c100
quanto atable
dentro de uma<div class="row">
Isso vai forçar a quebra de linha (não vai ser por conta do tamanho da tela) e pode evitar esse alinhamento bugado. – rLinhares 12/01/17 às 19:05