entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

2votos

¿Solucionar problemas responsivos sistema de grillas en bootstrap?

Saludos

Tengo el siguente código en bootstrap

<div class = "row">
  <div class="col-xs-12 col-sm-12 col-md-12 level">
    <h2></h2>
    <div class="row">
      <div class="col-xs-2 col-sm-2 col-md-2">
        <img></img>
        <p class="text-muted">Nivel Actual</p>
      </div>

      <div class="col-xs-8 col-sm-8 col-md-8">
        code ..
      </div>
      <div class="col-xs-2 col-sm-2 col-md-2">
        <img></img>
        <p class="text-muted">próximo nivel</p>
      </div>
    </div>
  </div>
</div>

Lo que pasa son dos cosas:

1) el row queda mas a lado izquierdo, no queda centrado en div.
2) al disminuir el tamaño de la página se va montando o sobreponiendo el div.

¿Alguna solución al respecto?

Gracias.

1 Respuesta

2votos

Leonardo-Tadei Puntos227010

Hola @nmenag,

nos vendría bien una imagen en dónde se vea el defecto para entender mejor lo del row que no queda centrado.

hay en tu código un exceso de sintaxis que tal vez sea el problema:

1) col-md-2 es el default, por lo que si los col-sm y con-xa son iguales, no hace falta ponerlos.

2) si bien debería funcionar, no es necesario que pongas el ROW con las 3 columnas adentro de otro ROW. Lo que deberías hacer es poner el ROW de las 3 columnas dentro de un CONTAINER o de un CONTAINER-FLUID

La estructura quedaría:
container

  • h2
  • row
    -- col 2
    -- col 8
    -- col 2

3) ponene al IMG la clase ing-responsive, ya que de otra forma el tamaño queda fijo y al "chocarse" con otro elemento, te lo puede enviar hacia abajo.

4) todo queda por default a la izquierda, salvo que digas otra cosa, así que con este código nada se verá centrado (pero es muy probable que sacando un ROW y metiendo todo en un CONTAINER se solucione, si no entiendo mal tu descripción)

Saludos!

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta