Witam, mam problem, ponieważ slidebar nie rozszerza się na cały ekran dla telefonów, a dodałem klasę "col-xs-12". Wie może ktoś, co może być nie tak? Pozdrawiam i dziękuję za każdą odpowiedź.
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="r03.css" type="text/css">
</head>
<body>
<div class="container">
<div class="row">
<label for="nav-switch" class="visible-xs-block "></label>
<input type="checkbox" id="nav-switch" class="nav-switch visible-xs-block">
</input>
<div class="col-sm-3 col-xs-12 col-left">
<ul class="list-group">
<li class="list-group-item disabled">Dodaj nowe zadania<span class="badge">1</span></li>
<li class="list-group-item list-group-item-info"><a href="index.html"> Pokaż wszystkie zadania<span class="badge badge-light">222</span></a></li>
<li class="list-group-item list-group-item-dark">Pokaż niewykonane zadania<span class="badge">1</span></li>
<li class="list-group-item">Zadania w tym miesiącu<span class="badge">1</span></li>
<li class="list-group-item">
<a href="index.html">
<h4 class="list-group-item-heading">Zadania w tym kwartale</h4>
<p class="list-group-item-text">Wyświetl zadania zaplanowane do wykonania w obecnym kwartale</p>
</a>
</li>
</ul>
</div>
<div class="col-sm-5 col-xs-12 col-center">
<div class="row">
<div class="col-xs-12"></div>
<div class="col-xs-12"></div>
</div>
</div>
<div class="col-sm-4 col-xs-12 col-right">
<div class="row">
<div class="col-xs-12"></div>
<div class="col-xs-12">
<div class="row">
<div class="col-md-6 col-xs-12"></div>
<div class="col-md-6 col-xs-12"></div>
<div class="col-md-6 col-xs-12"></div>
<div class="col-md-6 col-xs-12"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
#nav-switch {
padding: 10px;
display: none;
}
@media (max-width: 767px) {
.col-left {
width: 100%;
height: 100%;
position: fixed;
top: 60px;
right: 0;
bottom: 0;
left: -100%;
z-index: 1;
transition: 0.2s;
}
#nav-switch {
padding: 10px;
display: block;
}
.nav-switch {
width: 0;
height: 0;
}
.nav-switch:before {
display: block;
content: 'M';
position: fixed;
top: 15px;
left: 15px;
text-align: center;
z-index: 2;
font-size: 2em;
background: #eee;
color: #aaa;
border-radius: 2px;
line-height: 1.1em;
width: 30px;
height: 30px;
cursor: pointer;
}
.nav-switch:checked + .col-left {
left: 0;
transition: 0.2s;
}
}
