Удаляется левый блок bootstrap, что делать ?

0

Урок 45.

Надпись встает под видео , т.е ее не видно , а нужно чтобы она была снизу видеоролика , надписи где ГОД , Рейтинг и Режиссер

<!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">

    <!-- Main Style -->
    <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><a href="#">Главная</a></li>
                <li class="active"><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 col-lg-push-3">

                <form role="search" class="visible-xs">
                  <div class="form-group">
                    <div class="input-group">
                      <input type="search" class="form-control input-lg" placeholder="Ваш запрос">
                        <div class="input-group-btn">
                          <button class="btn btn-default btn-lg" type="submit"><i class="glyphicon glyphicon-search"></i></button>
                        </div>
                    </div>
                  </div>
                </form>
                     
                     <h1>Интерстеллар</h1>
                     <hr>
                     <div class="embed-responsive embed-responsive-16by9">
                      <iframe сlass="embed-responsive-item" src="https://www.youtube.com/embed/qcPfI0y7wRU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
                    
                      <div class="well info-block">
                        Год: <span class="badge">2014</span>
                        Рейтинг: <span class="badge">8.9</span>
                        Режиссер: <span class="badge">Кристофер Нолан</span>
                      </div>
                      
                     </div>          
 
          </div>

        <div class="col-lg-3 col-lg-pull-9">
          <div class="panel panel-info hidden-xs">
            <div class="panel-heading"> <div class="sidebar-header">Поиск</div></div>
              <div class="panel-body">
                <form role="search">
                  <div class="form-group">
                    <div class="input-group">
                      <input type="search" class="form-control input-lg" placeholder="Ваш запрос">
                        <div class="input-group-btn">
                          <button class="btn btn-default btn-lg" type="submit"><i class="glyphicon glyphicon-search"></i></button>
                        </div> 
                    </div>
                  </div>
                </form>
              </div>
            </div>

            <div class="panel panel-info">
              <div class="panel-heading"> <div class="sidebar-header">Вход</div></div>
                <div class="panel-body">
                   <form role="form">
                     <div class="form-group">
                       <input type="text" class="form-control input-lg" placeholder="Логин">
                     </div>
                     <div class="form-group">
                       <input type="password" class="form-control input-lg" placeholder="Пароль">
                     </div>

                     <button type="submit" class="btn btn-warning pull-right">вход</button>
                    </form>
    
                </div>
            </div>

            <div class="panel panel-info">
              <div class="panel-heading"> <div class="sidebar-header">Новости</div></div>
                <div class="panel-body">
                   <p>31.02.2017</p>
                   <p>Мы запустили новый серивис!</p>
                </div>
              </div>


                   <div class="panel panel-info">
              <div class="panel-heading"> <div class="sidebar-header">Рейтинг фильмов</div></div>
                <div class="panel-body">
                       
                       <ul class="list-group">
                         <li class="list-group-item list-group-warning">
                           <span class="badge">8.9</span>
                           <a href="#">Интерстеллар</a>
                         </li>
                         <li class="list-group-item list-group-warning">
                           <span class="badge">8.7</span>
                           <a href="#">Безумный макс</a>
                         </li>
                         <li class="list-group-item list-group-warning">
                           <span class="badge">8.3</span>
                           <a href="#">Матрица</a>
                         </li>
                         <li class="list-group-item list-group-warning">
                           <span class="badge">8.1</span>
                           <a href="#">Облачный атлас</a>
                         </li>
                         <li class="list-group-item list-group-warning">
                           <span class="badge">8.9</span>
                           <a href="#">Интерстеллар</a>
                         </li>
                         <li class="list-group-item list-group-warning">
                           <span class="badge">8.7</span>
                           <a href="#">Безумный макс</a>
                         </li>
                         <li class="list-group-item list-group-warning">
                           <span class="badge">8.3</span>
                           <a href="#">Матрица</a>
                         </li>
                         <li class="list-group-item list-group-warning">
                           <span class="badge">8.1</span>
                           <a href="#">Облачный атлас</a>
                         </li>
                       </ul>
       
                </div>
            </div> 
          </div>
        </div>
      </div>

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

    <footer>
      <div class="container">
        <p class="text-center"><a href="http:rentik.kg">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>

bootstrap

1 ответов

0

</div> лишний перед footer. Нарушена последовательность блоков.

Сравни свой код с оригинальным:

https://fructcode.com/ru/courses/bootstrap/interactive-film-page/

Sign up or Log in to write an answer