+ Не работает скролл при увеличении к 125%-175% страницы. Но вот когда увеличить в 200% - симулировать моб. телефон все в порядке. В чем проблема ?
{% load static from staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<title>{% block title%} {% endblock%}</title>
<!-- Bootstrap core CSS -->
<link href=" {% static "css/bootstrap.min.css"%}" rel="stylesheet">
<!-- Custom styles for this template -->
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="row affix-row">
<div class="col-sm-3 col-md-2 col-lg-2 affix-sidebar">
<div class="sidebar-nav">
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="visible-xs navbar-brand">Sidebar menu</span>
</div>
<div class="navbar-collapse collapse sidebar-navbar-collapse">
<ul class="nav navbar-nav" id="sidenav01">
<li class="active">
<a>
<h4>
Кафедра військової <br>
підготовки
<br>
<small>ІФНТУНГ</small>
</h4>
</a>
</li>
<li>
<a href="#" data-toggle="collapse" data-target="#toggleDemo" data-parent="#sidenav01" class="collapsed">
<span class="glyphicon glyphicon-cloud"></span> ТЗСП <span class="caret pull-right"></span>
</a>
<div class="collapse" id="toggleDemo" style="height: 0px;">
<ul class="nav nav-list">
{% for rozdils in rozdil %}
<li><a href="{{ rozdils.get_absolute_url}}">
{{rozdils.title}}</a></li>
{% endfor %}
</ul>
</div>
</li>
<li >
<a href="#" data-toggle="collapse" data-target="#toggleDemo2" data-parent="#sidenav01" class="collapsed">
<span class="glyphicon glyphicon-inbox"></span> РОЗДІЛ 2 <span class="caret pull-right"></span>
</a>
<div class="collapse" id="toggleDemo2" style="height: 0px;">
<ul class="nav nav-list">
<li><a href="#">Submenu2.1</a></li>
<li><a href="#">Submenu2.2</a></li>
</ul>
</div>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="col-sm-9 col-md-10 col-lg-10 affix-content">
<div class="container">
{%block name %} {% endblock%}
{% block content %}
{% endblock %}
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="{% static "js/bootstrap.min.js"%}"></script>
</body>
</html>
@media (min-width: 768px){
.affix-content .container {
width: 700px;
}
html,body{
background-color: #f8f8f8;
height: 100%;
overflow: hidden;
}
.affix-content .container .page-header{
margin-top: 0;
}
.sidebar-nav{
position:fixed;
width:100%;
}
.affix-sidebar{
padding-right:0;
font-size:small;
padding-left: 0;
}
.affix-row, .affix-container, .affix-content{
height: 100%;
margin-left: 0;
margin-right: 0;
}
.affix-content{
background-color:white;
}
.sidebar-nav .navbar .navbar-collapse {
padding: 0;
max-height: none;
}
.sidebar-nav .navbar{
border-radius:0;
margin-bottom:0;
border:0;
}
.sidebar-nav .navbar ul {
float: none;
display: block;
}
.sidebar-nav .navbar li {
float: none;
display: block;
}
.sidebar-nav .navbar li a {
padding-top: 12px;
padding-bottom: 12px;
}
}
@media (min-width: 769px){
.affix-content .container {
width: 600px;
}
.affix-content .container .page-header{
margin-top: 0;
}
}
@media (min-width: 992px){
.affix-content .container {
width: 900px;
}
.affix-content .container .page-header{
margin-top: 0;
}
}
@media (min-width: 1220px){
.affix-row{
overflow: hidden;
}
.affix-content{
overflow: auto;
}
.affix-content .container {
width: 1000px;
}
.affix-content .container .page-header{
margin-top: 0;
}
.affix-content{
padding-right: 30px;
padding-left: 30px;
}
.affix-title{
border-bottom: 1px solid #ecf0f1;
padding-bottom:10px;
}
.navbar-nav {
margin: 0;
}
.navbar-collapse{
padding: 0;
}
Простой
