Question

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.

Answer 1

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!