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

Alinear 2 div horizontalmete utilizando bootstrap

Hola a todos, soy nuevo en esto del responsive design y css3 y ahora me veo en la necesidad de hacer una pagina con la siguiente estructura:

<div id="perfil">
    <div class="row">
    </div>
</div>
<div id="principal">
   <div class="row">
    </div>
</div>

lo que busco es quelos 2 div esten alineados horizontalmente y no verticalmete lo intente anidado en columnas y filas con bootstrap pero se perdia el responsive design, actualmete estoy usando bootstrap 3.1.1 y no encuentro algo que me ayude,su ayuda sera de utilidad gracias.

3 Respuestas

2votos

abuzany Puntos380

Encontre la solución:

<div id="profile" class="span4"> // class="column-sm-4"
  <div class"row">
  </div>
</div>
<div id="principal" class="span8"> // class="column-sm-8">
  <div class="row">
  </div>
</div>

1voto

KoffeeSoft Puntos970

Seria haci, crear dos row y dentro de cada row o "fila" que son las que van horizontales ingresar el codigo de cada id con su respectivo div.

   <div class="row">
  <div id="perfil">
  </div>
</div>
<div class="row">
  <div id="principal">
  </div>
</div>

Espero te sirva.

1voto

ctapiamori Puntos1050

Boostrap tiene un sistema de grilla para manejar los espacios en la entre los objetos (como el div), el tamaño por defecto es 12 (esto puede ser modificado desde la misma pagina de bootstrap).

Considerando esto yo puedo tener 2 div horizontales de la siguiente forma

<div class="row">
<div class="col-sm-6>Contenido</div>
<div class="col-sm-6>Contenido</div>
</div>

En este ejemplo se ocupa todo el espacio porque la suma de los dos div es igual a 12, ahora pueden agregar diferentes valores (tienen desde el 1 hasta el 12), ejemplos: col-sm-4 y col-sm-8 o col-sm-4 y col-sm-4, según su diseño, realicen pruebas y verán lo rápido que puede ser.

Para un mejor entendimiento visitar el siguiente link: http://getbootstrap.com/examples/grid/

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