0

Quisiera implementar el uso de Grids de BS3 en mi Código html para evitar el uso de tablas y que mi formulario se viera de la siguiente manera usando grid, esto para mi versión mobile, sin modificar la versión de desktop.

introducir la descripción de la imagen aquí

Actualmente mi versión de escritorio se esta viendo así:

introducir la descripción de la imagen aquí

El siguiente es mi código en HTML con el que construyo mi formulario, esta hecho con la ayuda de PHP en una función:

public function datosUsuario(){
        echo '<div>';
        echo '<table class="table">';
        echo '<tbody>';
        echo '<tr>                 
            <td class="columna-titulo">No. Empleado:</td><td class="columna-valor">''</td>
            <td class="columna-titulo">Nombre:</td><td class="columna-valor" colspan="2">''</td>
            <td></td>
            </tr>';
        echo '<tr>
            <td class="columna-titulo">Fecha Ingreso:</td><td class="columna-valor" id="TdFechaIngreso">''</td>
            <td class="columna-titulo">Antigüedad (Años):</td><td class="columna-valor">''</td>
            <td class="columna-titulo">Departamento:</td><td class="columna-valor">''</td>
            </tr>';                                        
        echo '</tbody>';
        echo '</table>';
        echo '</div>';        
    }

Actualización:

Intente agregando a cada td un .col-sm-12 de la siguiente manera, pero aun no logro obtener el diseño que deseo.

public function datosUsuario(){
            echo '<div>';
            echo '<table class="table">';
            echo '<tbody>';
            echo '<tr>                 
                <td class="columna-titulo .col-sm-12">No. Empleado:</td><td class="columna-valor .col-sm-12">''</td>
                <td class="columna-titulo .col-sm-12">Nombre:</td><td class="columna-valor .col-sm-12" colspan="2">''</td>
                <td></td>
                </tr>';
            echo '<tr>
                <td class="columna-titulo .col-sm-12">Fecha Ingreso:</td><td class="columna-valor .col-sm-12" id="TdFechaIngreso">''</td>
                <td class="columna-titulo .col-sm-12">Antigüedad (Años):</td><td class="columna-valor .col-sm-12">''</td>
                <td class="columna-titulo .col-sm-12">Departamento:</td><td class="columna-valor .col-sm-12">''</td>
                </tr>';                                        
            echo '</tbody>';
            echo '</table>';
            echo '</div>';        
        }

¿Saben que estoy haciendo mal en mi código?

2
  • la version de BS es 3.X.X avisale a la gente por que ya BS va por la version 4 y 5 (beta)... y no es retrocompatible
    – user46896
    Commented el 22 feb. 2021 a las 15:24
  • Es correcto, acabo de añadir un enlace a la documentación de la versión que hago uso, gracias.
    – John Doe
    Commented el 22 feb. 2021 a las 15:29

3 respuestas 3

1

debes eliminar la tabla, los tr y td; estos elementos no admiten correctamente el uso de las clases de BS3.

la implementación correcta de Grids para la version 3 de BS es la siguiente:

Pero esto depende del maquetado que quieras realizar; debes entender que puedes combinar columnas (col) como tu quieras y que cada row es una linea nueva; y que cada breakpoint tiene una nomenclatura xs,sm,md,lg; asique debes analizar como quieres tu layout; lamentablemente no tengo tiempo para hacerte el maquetado.

<!-- Bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

   
   <div class="row">
      <div class="col-xs-1 bg-success">.col-xs-1</div>
      <div class="col-xs-1 bg-primary">.col-xs-1</div>
      <div class="col-xs-1 bg-success">.col-xs-1</div>
      <div class="col-xs-1 bg-primary">.col-xs-1</div>
      <div class="col-xs-1 bg-success">.col-xs-1</div>
      <div class="col-xs-1 bg-primary">.col-xs-1</div>
      <div class="col-xs-1 bg-success">.col-xs-1</div>
      <div class="col-xs-1 bg-primary">.col-xs-1</div>
      <div class="col-xs-1 bg-success">.col-xs-1</div>
      <div class="col-xs-1 bg-primary">.col-xs-1</div>
      <div class="col-xs-1 bg-success">.col-xs-1</div>
      <div class="col-xs-1 bg-primary">.col-xs-1</div>
    </div>
    <div class="row">
      <div class="col-xs-8 bg-success">.col-xs-8</div>
      <div class="col-xs-4 bg-primary">.col-xs-4</div>
    </div>
    <div class="row">
      <div class="col-xs-4 bg-success">.col-xs-4</div>
      <div class="col-xs-4 bg-primary">.col-xs-4</div>
      <div class="col-xs-4 bg-success">.col-xs-4</div>
    </div>
    <div class="row">
      <div class="col-xs-6 bg-success">.col-xs-6</div>
      <div class="col-xs-6 bg-primary">.col-xs-6</div>
    </div>
    
    <h3>para lo que necesitas, seria algo asi:</h3>
    <div class="row">
      <div class="col-xs-4 bg-success">.col-xs-4</div>
      <div class="col-xs-8 bg-primary">.col-xs-8</div>
    </div>
    <div class="row">
      <div class="col-xs-4 bg-success">.col-xs-4</div>
      <div class="col-xs-8 bg-primary">.col-xs-8</div>
    </div>
    <div class="row">
      <div class="col-xs-4 bg-success">.col-xs-4</div>
      <div class="col-xs-8 bg-primary">.col-xs-8</div>
    </div>
    <div class="row">
      <div class="col-xs-4 bg-success">.col-xs-4</div>
      <div class="col-xs-8 bg-primary">.col-xs-8</div>
    </div>
    <div class="row">
      <div class="col-xs-4 bg-success">.col-xs-4</div>
      <div class="col-xs-8 bg-primary">.col-xs-8</div>
    </div>
    
    

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

0

tendrías que hacer de los <tr> una row para que el la grid de Bootstrap funcione correctamente. Revisa las comillas de los echo PHP. No hace falta que coloques el punto dentro de la clase HTML (.col-sm-12). En tamaño md necesitas especificarle el valor para que quede como deseas. Con la grid de Bootstrap tal vez no haga falta el colspan. Te dejo el código ejemplo modificado:

echo "<div class='container-fluid p-3'>";
echo '<table class="table text-black">';
echo '<tbody>';
echo "<tr class='p-3 row'>".                 
     "<td class='columna-titulo col-sm-12 col-md-3'>No. Empleado:</td><td class='columna-valor col-sm-12 col-md-3'></td>".
     "<td class='columna-titulo col-sm-12 col-md-3'>Nombre:</td><td class='columna-valor col-sm-12 col-md-3'></td>".
     "</tr>";
echo "<tr class='p-3 row'>".
     "<td class='columna-titulo col-sm-12 col-md-2'>Fecha Ingreso:</td><td class='columna-valor col-sm-12 col-md-2' id='TdFechaIngreso'></td>".
     "<td class='columna-titulo col-sm-12 col-md-2'>Antigüedad (Años):</td><td class='columna-valor col-sm-12 col-md-1'></td>".
     "<td class='columna-titulo col-sm-12 col-md-2'>Departamento:</td><td class='columna-valor col-sm-12 col-md-3'></td>".
     "</tr>";                                        
echo '</tbody>';
echo '</table>';
echo '</div>';  

Espero te ayude, saludos.

4
  • No funciono amigo, puedes validar el uso de comillas, parece ser eso, verifica tu respuesta nuevamente para darle validez.
    – John Doe
    Commented el 22 feb. 2021 a las 14:40
  • no le funciona por que eso es BS4 y el usa BS3
    – user46896
    Commented el 22 feb. 2021 a las 15:33
  • Es correcto lo que dice @FranciscoNúñez no me funciono por la versión
    – John Doe
    Commented el 22 feb. 2021 a las 15:49
  • Hola, ok, vale, como te lo he mostrado en BS3 no funciona. No conozco alguna manera de hacerlo en esa versión, intenté con media-queries y no funcionó, lo siento. Commented el 22 feb. 2021 a las 18:10
0

Podrias añadir la clase row a los tr y a los col-sm-12 quitarles el punto que les precede.

Acabo de probarlo y me sale como tu pides.

1
  • 4
    La respuesta estaría mas completa si agregas un ejemplo de lo que propones ;)
    – Israel-ICM
    Commented el 22 feb. 2021 a las 15:56

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.