0

¿Alguien me puede ayudar con la vista en Grid?

Estoy integrando un nuevo diseño para un antiguo script. Va bien el trabajo pero como siempre tuve problemas con los <div> aun sigo liándome en el código.

Sé que es una tontera, pero me tire un dia entero y no consigo poner en el formato correcto lo siguiente:

Estoy tirando de la db datos para una tabla de precios. Como debo jugar con el php entre el html no consigo ponerlo para que se muestre en horizontal. Haga lo que haga siempre esta en vertical. Estos datos auto genera las tablas de precio en vertical, no puedo diseñar varias tablas en horizontal e insertar los datos por separado. Solo tengo un código que genera automáticamente en numero de tablas configuradas desde admin. Y este es mi problema, quiero mostrarlo en horizontal, un formato grid. Aquí os dejo el código por si alguien me puede ayudar o dejarme alguna mejor idea.

introducir la descripción de la imagen aquíintroducir la descripción de la imagen aquíintroducir la descripción de la imagen aquí

<div class="content">
    <div class="container">
        <div class="row">
            <div>
               <h2 class="title"><?=$lang['b_07']?> & <?=$lang['b_247']?>
 </h2>
               <h5 class="description"><?=$lang['b_395']?></h5>
            </div>
        </div>
  <?php
    $packs = $db->QueryFetchArrayAll("SELECT id,coins,price FROM `c_pack` 
 ORDER BY `id` ASC");
    if(!$packs){
        echo '<div class="msg"><div class="error">'.$lang['b_43'].'</div>
 </div>';
    }

    foreach($packs as $pack){
        $price = ($site['c_discount'] > 0 ? number_format($pack['price'] * 
  ((100-$site['c_discount']) / 100), 2) : $pack['price']);
  ?>

        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="col-md-3">
                        <div class="card card-pricing card-raised">
                            <div class="card-content">
                                <div class="icon icon-rose">
                                    <i class="material-icons">home</i>
                                </div>
                                <h4 class="card-title">
  <?=number_format($pack['coins']).' '.$lang['b_42'].' = '.($site['currency_code'] == '' ? get_currency_symbol('USD') : 
 get_currency_symbol($site['currency_code'])).$price?></br><?=$lang['b_36']?> = <?=($site['c_discount'] > 0 ? ''.get_currency_symbol($site['currency_code']).round($pack['price']/$pack['coins'], 4).''.get_currency_symbol($site['currency_code']).round($price/$pack['coins'], 4).'' : get_currency_symbol($site['currency_code']).round($price/$pack['coins'], 4))?></h4>
                                <div class="btn btn-rose btn-round" onclick="buyPack(<?=$pack['id']?>); return false"><?=$lang['b_199']?></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
</body>
<?php }?>

 <div style="clear:both"></div>
 <div id="pay_method"></div>
 </div>
1
  • Creo que tu error se encuentra en el col-md-12 seguidamente declaras un col-md-3, ya estas usando los 12 espacios de tu grid, en tal caso tendrias que poner despues del col-md-12 un nuevo row y ya despues si pones el col-md-3 Commented el 21 ene. 2018 a las 22:27

2 respuestas 2

0

Remueve <div class="col-md-12"> y su correspondiente etiqueta de cierre, eso hace que cada card tome las 12 columnas y obligue a las demás a posicionarse por debajo.

   <div class="container">
        <div class="row">
            <div class="col-md-12"> <!-- Remover este div -->
                <div class="col-md-3"> <!-- Dejar este para que tome 3 columnas -->
                    <div class="card card-pricing card-raised">
                        <div class="card-content">
                            <div class="icon icon-rose">
                                <i class="material-icons">home</i>
                            </div>
                            <h4 class="card-title"><?=number_format($pack['coins']).' '.$lang['b_42'].' = '.($site['currency_code'] == '' ? get_currency_symbol('USD') : get_currency_symbol($site['currency_code'])).$price?></br><?=$lang['b_36']?> = <?=($site['c_discount'] > 0 ? ''.get_currency_symbol($site['currency_code']).round($pack['price']/$pack['coins'], 4).''.get_currency_symbol($site['currency_code']).round($price/$pack['coins'], 4).'' : get_currency_symbol($site['currency_code']).round($price/$pack['coins'], 4))?></h4>
                            <div class="btn btn-rose btn-round" onclick="buyPack(<?=$pack['id']?>); return false"><?=$lang['b_199']?></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
2
  • Gracias por tu ayuda, pero aun asi me gustaria pregutar cual seria tu opinion sobre la colocacion correcta de los col-sm-, col-xs- o col-lg. Lo he puesto en 3 columnas pero ahora me encuentro que a la resolucion de 1280x800 se corta la tercera columna, de hecho hace un desplazamiento con el background y todo.
    – Carla
    Commented el 22 ene. 2018 a las 22:24
  • Va a depender de como quieres tu diseño, por lo general xs optaría por que ocupe todo la pantalla usando col-xs-12 aun que si tu diseño de la tarjeta es pequeña podrías poner hasta 2 en la vista móvil (col-xs-12 para cada tarjeta). En sm y md creo que sería entre 2 o 4 tarjetas por fila y en lg quizás 6 tarjetas por fila. Como te digo, va a depender de tu diseño, pero puede ir jugando colocando números pares de tarjetas por fila. Commented el 23 ene. 2018 a las 2:33
0

Carla, parece que simplemente no estás colocando el foreach en el sitio adecuado, así que sólo cambia un poco el orden. Deja el <div class="col-md-12"> fuera de foreach ($packs as $pack) { ... } (no lo quites porque tu grid igual lo necesita). Quedaría algo así:

<div class="content">
    <div class="container">
        <div class="row">
            <div>
               <h2 class="title"><?=$lang['b_07']?> & <?=$lang['b_247']?></h2>
               <h5 class="description"><?=$lang['b_395']?></h5>
            </div>
        </div>

        <div class="container">
            <div class="row">
                <div class="col-md-12">

                <?php $packs = $db->QueryFetchArrayAll("SELECT id,coins,price FROM `c_pack` ORDER BY `id` ASC");
                if(!$packs) { 
                  echo '<div class="msg"><div class="error">'.$lang['b_43'].'</div></div>';
                }

                foreach($packs as $pack){
                  $price = ($site['c_discount'] > 0 ? number_format($pack['price'] * ((100-$site['c_discount']) / 100), 2) : $pack['price']);
                ?>
                    <div class="col-md-3">
                        <div class="card card-pricing card-raised">
                            <div class="card-content">
                                <div class="icon icon-rose">
                                    <i class="material-icons">home</i>
                                </div>
                                <h4 class="card-title"><?=number_format($pack['coins']).' '.$lang['b_42'].' = '.($site['currency_code'] == '' ? get_currency_symbol('USD') : get_currency_symbol($site['currency_code'])).$price?></br><?=$lang['b_36']?> = <?=($site['c_discount'] > 0 ? ''.get_currency_symbol($site['currency_code']).round($pack['price']/$pack['coins'], 4).''.get_currency_symbol($site['currency_code']).round($price/$pack['coins'], 4).'' : get_currency_symbol($site['currency_code']).round($price/$pack['coins'], 4))?></h4>
                                <div class="btn btn-rose btn-round" onclick="buyPack(<?=$pack['id']?>); return false"><?=$lang['b_199']?></div>
                            </div>
                        </div>
                    </div>

                <?php } ?>

                </div>
            </div>
        </div>
</body>


<div style="clear:both"></div>
<div id="pay_method"></div>
</div>

Así cada bloque de precios se añadirá anidado al contenedor que abarca los 12 fragmentos de la grid, ocupando cada uno una tercera parte (col-md-3 es decir que te quedarán filas de 4, y puedes hacer que sean más o sean menos dependiendo del dispositivo añadiendo col-sm-, col-xs- o col-lg-, etc). Ojalá te sirva. Saludos!

1
  • Gracias Drewkenobi ya esta resuelto, pus mira una tonteria que me llevo un dia entero. es que a veces me lio tanto con los div s mezclados con php que al final mira que facil..... te lo agradezco mucho
    – Carla
    Commented el 22 ene. 2018 a las 11:49

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.