0

Buenas!

Lo primero de todo soy un supernoob con páginas web y he tomado la mala decisión de usar bootstrap en mi primer proyecto de la universidad, así que agradecería todo consejo que podáis darme :3

Estoy haciendo una plantilla de la barra de navegación y la barra lateral y quiero que estén un poco coordinadas.

Primero he creado una fila donde esta colocada la barra de navegación y la he dividido en dos columnas, una de tamaño md-2 y otra de md-10, en la pequeña he puesto el header de la barra y en la grande los botones.

Para el resto de la página he hecho otra fila y la he dividido de la misma forma que la anterior. En la pequeña esta situada la barra lateral y en la grande el contenido principal de las páginas.

Haciendo esto he conseguido que parezca que las dos barras se unen en el header y le da un aspecto bastante estético a mi parecer.

El problema es que estoy corriegiendo la posición de algunos elementos de bootstrap cambiando los elementos margin y padding de algunos divs para conseguir que todo cuadre como quiero, pero claro según el navegador y tamaño de pantalla la posición que he puesto no es la misma y se descuadra.

Plantilla

Como puedo hacer para que algunos divs donde pongo botones, contenido o lo que sea se quede siempre en la misma posición? (pegado a un lateral o top). He probado varias formas que he encontrado por internet pero siempre se descuadra algo y es un poco frustrante porque pierdo más tiempo colocando cosas que pensando y haciendo la página.

Aquí dejo el código: CodePen

Utilizo bootstrap 3.3.7.

3 respuestas 3

0

Puedes utilizar los siguientes códigos en css.

position: absolute;
z-index: 100;

Uno hace que sea absoluto como dice, e independiente de lo que haya, siempre se quedara allí. z-index define en que "capa" esta, o sea, si quieres que este por encima de todo coloca 9999, si algo estará por sobre este, ese elemento debe tener un z-index superior.

Espero que te ayuden estos códigos y éxito con tu proyecto :D

0

Amigo recuerda que siempre los row de boostrap siempre tienen 12 celdas es decir. en un

<div class="row">

maximo de 12 celdas si quieres tener mas de 12 crea otros row . aparte de eso te recomiendo que leas la documentacion de boostrap.

http://getbootstrap.com/css/#grid

recuerda que tambien en un <div class="col-sm-12 col-md-12"> puedes colocar la diferente diferencias de un pantalla.

en tu codigo ya lo modifique :

https://codepen.io/anon/pen/mWoRPg

HTML

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <link href="general.css" type="text/css" rel="stylesheet" />
    <link href="inicio.css" type="text/css" rel="stylesheet" />
    <title>Inicio</title>
</head>

<body>

    <div class="container-full">

        <!-- Nav -->
        <nav class="navbar navbar-inverse navbar-static-top">
            <div class="container margin-left-nav">
                <div class="row">
                    <div class="col-md-2 col-sm-2">
                        <!-- Navbar brand (Brainiac) y botón colapsable -->
                        <div class="navbar-header">
                            <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                          </button>
                            <a class="navbar-brand" href="index.html">Brand</a>
                        </div>
                    </div>

                    <div class="col-md-10 col-sm-10">
                        <div class="navbar-collapse collapse" id="navbar-main">

                            <!-- Navbar botones -->
                            <ul class="nav navbar-nav horizontal mar-left">
                                <li><a href="inicio.html">Inicio</a></li>
                                <li><a href="miembros.html">¿Quiénes somos?</a></li>
                                <li><a href="contacto.html">Contacto</a></li>
                            </ul>

                            <!-- Navbar derecho (Registro, Login) -->
                            <ul class="nav navbar-nav navbar-right horizontal">

                                <!-- Registro -->
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Registrarse<span class="caret"></span></a>
                                    <ul class="dropdown-menu dropdown-width">
                                        <div class="col-lg-12">
                                            <div class="text-center">
                                                <h3><b>Registro</b></h3></div>
                                            <form>
                                                <div class="form-group">
                                                    <input type="text" class="form-control" placeholder="Usuario">
                                                </div>
                                                <div class="form-group">
                                                    <input type="email" class="form-control" placeholder="Email">
                                                </div>
                                                <div class="form-group">
                                                    <input type="password" class="form-control" placeholder="Contraseña">
                                                </div>
                                                <div class="form-group">
                                                    <input type="password" class="form-control" placeholder="Confirmar contraseña">
                                                </div>

                                                <!-- Botón Registrase -->
                                                <div class="form-group">
                                                    <div class="row">
                                                        <div class="col-xs-6 col-xs-offset-3">
                                                            <input type="submit" class="form-control btn btn-info" value="Registrarse">
                                                        </div>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </ul>
                                </li>

                                <!-- Inicio de sesión -->
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Iniciar sesión <span class="caret"></span></a>
                                    <ul class="dropdown-menu dropdown-width">
                                        <div class="col-lg-12">
                                            <div class="text-center">
                                                <h3><b>Inicio de sesión</b></h3></div>
                                            <form>
                                                <div class="form-group">
                                                    <label for="username">Usuario</label>
                                                    <input type="text" class="form-control">
                                                </div>
                                                <div class="form-group">
                                                    <label for="password">Contraseña</label>
                                                    <input type="password" class="form-control">
                                                </div>
                                                <div class="form-group">
                                                    <div class="row">
                                                        <div class="col-xs-7">
                                                            <input type="checkbox">
                                                            <label for="remember">Recordarme</label>
                                                        </div>
                                                        <div class="col-xs-5 pull-right">
                                                            <input type="submit" class="form-control btn btn-success" value="Log In">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                <div class="form-group">
                                                    <div class="row">
                                                        <div class="col-lg-12">
                                                            <div class="text-center">
                                                                <a href="#" class="forgot-password">Olvidaste la contraseña?</a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                </div>
                                                <input type="hidden" class="hide" name="token" id="token" value="a465a2791ae0bae853cf4bf485dbe1b6">
                                            </form>
                                        </div>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </div>


                </div>
            </div>
        </nav>
    </div>


    <section class="container-full">

        <!-- Main page -->
        <div class="row" id="full-page">

            <!-- Sidebar -->
            <div class="col-md-2 col-sm-2">
                <div class="profile-sidebar">

                    <!-- User picture -->
                    <div class="profile-userpic">
                        <img src="img/Otros/noUserPic.png" class="img-responsive img-circle border" alt="foto">
                    </div>

                    <!-- Sidebar title -->
                    <div class="profile-user">
                        <div class="profile-name">User</div>
                    </div>

                    <!-- Sidebar menu -->
                    <nav class="profile-menu">
                        <ul class="nav navbar vertical">
                            <li>
                                <a href="#"><i class="glyphicon glyphicon-user"></i> Perfil</a>
                            </li>
                            <li>
                                <a href="#"><i class="glyphicon glyphicon-stats"></i> Estadísticas</a>
                            </li>
                            <li>
                                <a href="#"><i class="glyphicon glyphicon-star"></i> Trofeos</a>
                            </li>
                            <li>
                                <a href="#"><i class="glyphicon glyphicon-flag"></i> Ayuda</a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>

            <!-- Content -->
            <div class="col-md-10 col-sm-2">

            </div>
        </div>
    </section>
</body>

CSS

body {
    font-family: sans-serif;
    background-color: rgb(239, 244, 246);
}

.navbar {
    margin-bottom: 0 !important;
}

.mar-left {
    margin-left: -13px !important;
}

ul.navbar-right {
    /*margin-right: -15.45vw !important;*/
    margin-right: -8.5vw !important;
}

.navbar-nav>li>a {

}

.row {

}

.margin-left-nav {
    margin-left: 0 !important;
}

ul.dropdown-width {
    width: 300px;
}

.navbar .nav>li.dropdown.open.active>a:hover,
.navbar .nav>li.dropdown.open>a,
li a:hover,
li.active>a {
    color: #fff !important;
    background-color: rgb(10, 66, 117) !important;
}

li a:hover {
    background-color: rgb(10, 66, 117) !important;
    color: #ffffff !important;
}

li.active>a {
    background-color: rgb(10, 66, 117) !important;
    color: #ffffff !important;
}

.navbar-brand:hover {
    color: #5b9bd1 !important;
}

ul.horizontal li {
    border-left: 1px solid black;
}

ul.horizontal li:last-child {
    border-right: 1px solid black;
}


/*.center {
    margin: 0 auto !important;
}*/


/*.vertical-center {
    display: flex;
    align-items: center;
}*/

.border {
    border: 1px solid black;
}


/*----- Sidebar -----*/

.profile-sidebar {
    background-color: rgb(35, 35, 35);
    height: 92.5vh;
    border-right: 1px solid black;
    margin-top: 0 !important;
}

.profile-userpic {
    padding-top: 40px;
}

.profile-userpic img {
    margin: 0 auto;
    width: 70%;
    height: 70%;
}

.profile-user {
    text-align: center;
    margin-top: 20px;
}

.profile-name {
    color: #93a3b5;
    font-size: 16px;
    font-weight: 600;
    padding-bottom: 10px;
}

.profile-menu {
    margin-top: 30px;
}

.profile-menu ul li a {
    color: #93a3b5;
    font-size: 14px;
    font-weight: 400;
    padding-left: 40px;
    border-bottom: 1px solid black;
}

ul.vertical li:first-child {
    border-top: 1px solid black;
}

.profile-menu ul li a i {
    margin-right: 9px;
    font-size: 14px;
}


/*----- End Sidebar -----*/

#full-page {
    background-color: rgb(239, 244, 246);
    width: 100vw;
}

#header-content {
    height: 43.5vh;
}

.lma-content {
    height: 50vh;
}
-1

Sí, se lo que me habéis respondido y he probado varias veces, (Como estoy aún por la primera entraga aún no tengo que adapatar la página a dispositivos móviles y demás) a lo que me refiero es a que bootstrap tiene margin y padding por defecto en algunos de sus elementos, y los estoy contrarrestado para colocarlos justo donde quiero.

La solución ideal para mí sería decirle a un elemento ponte a la derecha del todo sin importar el padding y margin por defecto, pero no consigo que se quede en su lugar porque tengo que corregir esos campos constantemente.

1
  • Deberías expresar esto como un comentario sobre la respuesta a la que te quieres referir, puesto que no corresponde como una respuesta. Una vez expreses tu comentario entonces elimina este aporte.
    – NekoOs
    el 5 jul. 2017 a las 2:29

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.