Skip to main content
etiquetas editadas
Enlace
Shaz
  • 29.2k
  • 18
  • 40
  • 61
Origen Enlace

Posicionamiento de paneles boostrap

Actualmente estoy trabajando en una aplicación con Bootstrap 3 en Dreamweaver y estoy utilizando paneles para separar algunos datos y funciones en un menú.

Según sé, al utilizar rejillas en la página la pagina se divide en 12 posibles columnas, dándole al programador la posibilidad de poder separar el ancho del body de la página hasta en esas 12 columnas. El problema es que estoy utilizando paneles con el valor 6 de ancho y no los separa adecuadamente.

Espero puedan ayudarme o darme una alternativa. Les dejo el código de mi proyecto.

    <div class="container">
    <h1 class="text-center">Perfil de usuario</h1>
    <hr>
    <div class="row col-lg-6 col-md-6 col-sm-6 col-xs-12">
    <div class="panel panel-info">
        <div class="panel-heading text-center">Datos personales</div>
        <div class="panel-body">
            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
            <img class="img-responsive center-block" src="images/icons/id-card-1.png" width="150" height="150" alt=""/>
            <hr>
            </div>
          <div class="col-lg-5 col-md-5 col-sm-12 col-xs-12 text-center">
            <p class="text-muted"><strong>Nombre(s): </strong></p>
            <p>Alex</p>
            <p class="text-muted"><strong>Apellidos: </strong></p>
            <p>Apellidos</p>
            <p class="text-muted"><strong>Fecha de nacimiento: </strong></p>
            <p>22/11/1999</p>
            </div>
        </div>
    </div>
    </div>
    <div class="row col-lg-6 col-md-6 col-sm-6 col-xs-12">
        <div class="panel panel-success">
        <div class="panel-heading text-center">Configuracion de la cuenta</div>
        <div class="panel-body">
            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
            <img class="img-responsive center-block" src="images/icons/switch-5.png" width="150" height="150" alt=""/>
            <hr>
            </div>
            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 text-center">
            <p></p>
            <div class="btn-group-vertical">
            <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-lock"></span> Cambiar contraseña</button><br>
            <button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-user"></span> Editar foto de perfil</button><br>
            <button type="button" class="btn btn-info"><span class="glyphicon glyphicon-info-sign"></span> Editar estado</button><br>
            </div>
            <p></p>
            </div>
        </div>
    </div>
    </div>
</div>

Les muestro en la siguiente imagen. Como se puede ver el espacio en blanco que está en la parte derecha del div debería estar entre las dos columnas esto se puede notar por la barra horizontal que se encuentra debajo del titulo.