Question

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.

Answer 1

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>

Answer 2

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.

Answer 3

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/