Grid bootstrap getting misaligned on panel with results brought from the bank

0

I'm displaying the result of a query in panels, only they are getting misaligned, I want it to show how it is in the image below only 1 underneath the other, in the way that it is generating a pyramid effect, follows code and image example:

 <div class="container">
 <?php
      while ($row = mysql_fetch_array($query_chamados)) {

        $var_chamado   = $row['CHAMADO'];
        $var_problema  = $row['PROBLEMA'];
        $var_descricao = $row['DESCRICAO'];
        $var_contato   = $row['CONTATO'];
        $var_telefone  = $row['TELEFONE'];
        $var_abertura  = $row['DATA_DE_ABERTURA'];
        $var_horasemab = $row['HORAS_EM_ABERTO'];
        $var_numloja   = $row['NUM_LOJA'];
        $var_area      = $row['AREA'];
        $var_setor     = $row['SETOR'];
        $var_tecnico   = $row['TECNICO'];
        $var_abertopor = $row['ABERTO_POR'];
        $var_status    = $row['STATUS'];
        $var_painel    = $row['PAINEL'];




echo"
<div class='row'>
  <div class='col-xs-4'>
    <div class='panel panel-danger'>
      <div class='panel-heading'>
        <h3 class='panel-title'>
          <h3>
              <font  color='#FFFFFF'>
               <a class='Modal' data-toggle='modal' data-target='#myModal'><span class='glyphicon glyphicon-info-sign' aria-hidden='true'></span></a>&nbsp;&nbsp;&nbsp;$var_chamado
              </font>";
              if( $var_painel == 1){
              echo"<a href='ciente.php?id=". $row['CHAMADO'] ."' class='EstouCiente'>CIENTE</a>";
                }

              echo"</h3>
        </h3>
      </div>
        <div class='panel-body'>
          <h5>
             ABERTO A 0$var_horasemab HORAS <br />
             TELEFONE : $var_telefone       <br />
             ABERTO POR: $var_abertopor     <br />
             LOJA: 0$var_numloja            <br />
          </h5>
      </div>
    </div>
  </div>";
     }
  echo"</div>";
 ?>

@GabrielSousa

echo"
<div class='row'>
  <div class='col-xs-4'>
    <div class='panel panel-danger'>
     <div class='panel-heading'>
        <h3 class='panel-title'>    
         <a href='informacao.php?id=". $row['CHAMADO'] ."' class='left'>
          <span class='glyphicon glyphicon-info-sign' aria-hidden='true'>
          </span>
         </a>";
if( $var_painel == 0){
  echo"<a href='ciente.php?id=". $row['CHAMADO'] ."' class='right'>CIENTE
        </a>";
    }
 echo" 
</h3>
  </div>
  <div class='panel-body'>
         <center>
           $var_chamado
         </center>
       </div>
    </div>        
  </div>";
    }
echo"</div>";
 ?>

@Matheus Godoi

<?php while ($row = mysql_fetch_array($query_chamados)) : ?>
<div class="row">

  <div class="col-xs-4">

  <div class="panel panel-danger">
  <div class="panel-heading">
    <h3 class="panel-title"></h3>
  </div>
  <div class="panel-body">

  </div>
</div>

</div>
<?php endwhile; ?>
</div>
    
asked by anonymous 22.12.2016 / 15:39

3 answers

1

bootstrep uses a grid system that a row can have up to 12 columns.

Anytime you drop the while loop

It generates an x number of squares within a row

Each square used column uses 4 spaces of row

so if the while print more than 3 row exceeds the limit value supported by a row

you have to generate a logic for every 3 squares you generate it beam the old row and open a new one

The code will look something like this

<?php 
        $i = 0;
        $row = 0; // contador de quadrados inseridos na row
    ?>

        <div class="row">
        <?php while($i < 20) : ?>

        <?php
           if($row == 3){ 
// se dois quadrador for adicionado fecha a row e abre uma nova
                 echo '</div><div class="row"> ';
// como a row é nova o marcador zera
                 $row = 0;
               } ?>
              <div class="col-xs-4">
                  <div class="panel panel-danger">
                      <div class="panel-heading">
                        <h3 class="panel-title"></h3>
                      </div>
                      <div class="panel-body">
                      </div>
                  </div>
              </div>     

        <?php

        $row++; // incrementa 1 pois um quadrado foi adicionado a row
        $i++;

        endwhile; ?>

        </div>
    
22.12.2016 / 20:26
0

Let's go by parts

Semantically HTML is wrong

<h3 class='panel-title'>
          <h3>
              <font  color='#FFFFFF'>
               <a class='Modal' data-toggle='modal' data-target='#myModal'><span class='glyphicon glyphicon-info-sign' aria-hidden='true'></span></a>&nbsp;&nbsp;&nbsp;$var_chamado
              </font>";
              if( $var_painel == 1){
              echo"<a href='ciente.php?id=". $row['CHAMADO'] ."' class='EstouCiente'>CIENTE</a>";
                }

              echo"</h3>
        </h3>
      </div>

Has one h3 within another h3

It may not look like this but it does affect how the browser will render it on the screen.

Another thing is color

<font  color='#FFFFFF'>

In HTML5 it should be stylized by CSS, this form is obsolete.

Try to fix the code without PHP first, if it does not really complicate,

then see if there is any error using this site link

Finally put PHP.

I've tried to organize HTML so far

<div class='row'>
  <div class='col-xs-4'>
    <div class='panel panel-danger'>
      <div class='panel-heading'>
        <h3 class='panel-title'>
            <font  color='#FFFFFF'>
                   <a class='Modal' data-toggle='modal' data-target='#myModal'>
                        <span class='glyphicon glyphicon-info-sign' aria-hidden='true'></span>
                   </a>&nbsp;&nbsp;&nbsp;
              </font>              
              <a href="" class='EstouCiente'>CIENTE</a>
        </h3>
      </div>
      <div class='panel-body'>
          <h5>
             ABERTO A 0$var_horasemab HORAS <br />
             TELEFONE : $var_telefone       <br />
             ABERTO POR: $var_abertopor     <br />
             LOJA: 0$var_numloja            <br />
          </h5>
      </div>
    </div>
  </div>
 </div>
    
22.12.2016 / 17:05
0

Make sure there is no text-align: center in your css.

One tip: Try to fix this echo of PHP. Instead of treating HTML as a simple string, use it like this:

<?php while ($row = mysql_fetch_array($query_chamados)) : ?>

 //código HTML

<?php endwhile; ?>

Note: I may be enagoado (since I do not know the full context of your project) but since you are already using mysql_fetch_array, you do not have to create variables and assign them values of $ row; >     

22.12.2016 / 18:03