4.1 BOOTSTRAP (Не опускается footer)

Повторял за Сергеем и в один момент когда мы должны были опустить footer вниз у Сергея получилось это сделать а у меня нет. Пробовал смотреть решать проблему не помогло. Прошу помощи! Фото: https://pastenow.ru/65b4e584ed1e9e864e1b961abc5fe260

Код:

<!DOCTYPE html>
<html lang="ru">
  <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 -->
    <title>Киномостр Bootstrap</title>

    <!-- Bootstrap -->
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">
<!-- BootStrap -->
        <link href="assets/css/style.css" rel="stylesheet">

     <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>

    <div class="container-fluid">
           <div class="row">

            <nav role="navigation" class="navbar navbar-inverse">
                      <div class="container">

                        <div class="navbar-header header">

                          <div class="container">

                            <div class="row">

                              <div class="col-lg-12">
                                <h1><a href="#">КиноМонстр</a></h1>
                                <p>Кино - наша страсть!</p>
                              </div>

                            </div>

                          </div>
                          <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
                            
                          <span class="sr-only">Toggle navigation</span>
                          <span class="icon-bar"></span>
                          <span class="icon-bar"></span>
                          <span class="icon-bar"></span>
                          </button>
                        </div>
                        <div id="navbarCollapse" class="collapse navbar-collapse navbar-right">
                          
                          <ul class="nav nav-pills">
                            <li class="active"><a href="#">Главная</a></li>
                            <li><a href="#">Фильмы</a></li>
                            <li><a href="#">Сериалы</a></li>
                            <li><a href="#">Рейтинг фильмов</a></li>
                            <li><a href="#">Контакты</a></li>
                          </ul>
                        </div>
                      </div>
            </nav>
                
              </div>
        </div>  

        <div class="wrapper">

      <div class="container">
        
        <div class="row">
          
          <div class="col-lg-9">
            


          </div>


          <div class="col-lg-3">

          </div>
          
        </div>

      </div>
         <div class="clear"></div> 
    </div>
           
         


          <footer>
            
              <div class="container">
                <p class="text-center"><a href="https://ru.wh-db.com">WH-DB.COM</a></p>
              </div>

          </footer>



         <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="assets/js/bootstrap.min.js"></script>
  </body>
</html>



/* Стили CSS: */




 .header a, a:hover {
color: #f0ad4e;
text-decoration: none;
 }

 .header h1 {
 	letter-spacing: 8px;
 	font-size: 300%
 }

 .header p {
 	color: white !important;
 	font-size: 90%;
 	letter-spacing: 3px;
}

.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover {
    color: #fff;
    background-color: #346270;
}

.nav-pills>li>a {
	color: #fff;
}

.nav-pills>li>a:hover {
	background-color: #346270;
 }

.navbar-inverse {
    padding: 1%;
 }

@media (max-width: 767px) {
.nav-pills>li {
	float: none;
    }
.nav-pills {
	text-align: center;
   }

.header h1 {
	letter-spacing: 5px;
	font-size: 239%;
    }

  .header {
  	text-align: center;
  }
}

.clear	 {
	clear: both;
	height: 63px;
}

.wrapper {
	min-width: 100%;
}

  html, body {
	height: 100%;
}

footer {
	color: #666;
	background-color:  #222;
	padding: 17px 0 18px 0;
	border-top: 1px solid #000;
}

4.1 bootstrap footer ошибка

Максим Йолтуховський

4 years ago

Один ответ