Check the new version here

Popular channels

[Consulta] Problema con la sidebar de bootstrap

Hola, quiero saber por qué si agrego columnas y achico horizontalmente la pantalla se pone encima de la sidenav de bootstrap. Lo que quiero es cuando toque la sidenav se vaya directamente arriba como en la tecer foto, no a la mitad







Toda ayuda es bienvenida (recién arranco con HTML, sepan disculpar)





CÓDIGO

HTML:

<div class="row">
<div class="col-xs-12 col-sm-6 col-md-3" id="sideNav">
<nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top" id="sideNav">

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

<div class="col-xs-12 col-sm-6 col-md-3 container">
<label-title>Partido de nombre_usuario</label-title>
<hr/>
<dl class="dl-horizontal">
<dt>Lugar:</dt>
<dd>Yatay 240</dd>
<dt>Fecha y hora:</dt>
<dd>5/9/2018 - 18:00</dd>
<dt>Cantidad de jugadores:</dt>
<dd>8/10</dd>
</div>

CSS:

@media (min-width: 992px) {
#sideNav {
text-align: center;
position: fixed;
top: 0;
left: 0;
display: flex;
flex-direction: column;
width: 17rem;
height: 100vh;
border-right: 3px solid black;

}
}

.bg-primary {
background-color: #E5E7E9 !important;
}

.container {
padding: 15px;
color: #ffffff;
background: #3399FF;
margin: 5px;
left: 21%;
display: inline-block;
border-radius: 15px;
border: 3px solid #153D66;
height: 50vh;
}

label-title {
padding: 5px;
font-size: 24px;
font-weight: bold;
color: #153D66 !important;
0
2
0
0
2Comments