Задать вопрос
@timtimIT
html

Почему происходит следующее: имеется сетка бутстрап 3, строка разделена на две колонки, почему одна колонка съезжает вниз?

Подскажите пожалуйста,почему происходит следующее: имеется сетка бутстрап 3, строка (row) разделена на 2 колонки col-9 и col-3 . Col-3 съезжает вниз,в разработчике показывает что строка row закрыта перед col-3 ,хотя в index.html закрыто все так как нужно, div row: col-9 col-3 /div. C чем это связано, как это исправить?
  • Вопрос задан
  • 1606 просмотров
2 комментария
Подписаться 2 Оценить 2 комментария
Пригласить эксперта
Ответы на вопрос 1
mlnkv
@mlnkv
JavaScript Developer
Надо аккуратнее верстать, следить за отступами. У вас где то лишний тег div не закрыт

<!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 -->
  <title>Bootstrap Template</title>

  <!-- Bootstrap -->
  <link href="static/css/bootstrap.css" rel="stylesheet">
  <link href="static/font-awesome-4.3.0/css/font-awesome.css" rel="stylesheet">
  <link href="static/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.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>
<body>

  <div class="container">
    <header>
      <div class="row">

        <div class="col-lg-4 col-md-4 col-sm-4">
          <img src="static/images/logo_header.png"/>
        </div>

        <div class="col-lg-8 col-md-8 col-sm-8">            
          <div class="container">          
            <form class="inline-form">
              <div class="row"> 
                <div class="col-lg-7 col-md-7 col-sm-7 col-md-offset-1 col-lg-offset-1">                
                  <div class="search-box width-47">                  
                    <i class="fa fa-search"></i>
                    <input type="text" placeholder="search">
                    <div class="btn-group">
                      <button class="btn btn-default dropdown-toggle head-button" data-toggle="dropdown">
                        All Categories <span class="caret"></span>
                      </button>
                      <ul class="dropdown-menu">
                        <li><a href="#">Пункт1</a></li>
                        <li><a href="#">Пункт2</a></li>
                        <li><a href="#">Пункт3</a></li>
                        <li><a href="#">Пункт4</a></li>
                        <li><a href="#">Пункт5</a></li>
                      </ul>                   
                    </div>
                    <a href="#" ><img src="static/images/go.png"/></a>             
                  </div>
                </div> 

                <div class="col-lg-4 col-md-4  col-sm-4">
                  <div class="btn-group">
                    <div class="headerbuttontop btn"><img src="static/images/sing_up.png"/><br>Sing Up</div>
                    <div class="headerbuttontop btn"><img src="static/images/login.png"/><br>Login</div>
                  </div>
                </div>  
              </div>  
            </form>
          </div>    
        </div>

      </div>

      <div class="row">
        <div class="col-md-10 col-lg-10 col-sm-10 col-md-offset-1 col-lg-offset-1">
          <div class="nav">
            <ul class="nav navbar-nav">
              <li><a href="#">Home</a></li>
              <li><a href="#">Photography</a></li>
              <li><a href="#">Video</a></li>
              <li><a href="#">Environment</a></li>
              <li><a href="#">Travel</a></li>
              <li><a href="#">Adventure</a></li>
              <li><a href="#">Television</a></li>
              <li><a href="#">Kids</a></li>
            </ul>         
          </div>       
        </div>
      </div>
    </header> 

    <div class="main">
      <div class="row">
        <div class="col-md-9 col-lg-9 col-sm-9 mainleft">
          <div class="row">
            <div class="col-lg-3 col-md-3 col-sm-3">
              <ul class="leftmenu">
                <!-- ЭТО ЧЕ ЗА АДСКИЙ БРЕД?!  ul > a > li ??? -->
                <a href="#"><li><img src="static/images/dailynews.png"/><br>Daily News</li></a>
                <a href="#"><li><img src="static/images/Magazine.png"/><br>Magazine</li></a>
                <a href="#"><li><img src="static/images/Maps.png"/><br>Maps</li></a>
                <a href="#"><li><img src="static/images/Science.png"/><br>Science</li></a>
                <a href="#"><li><img src="static/images/Education.png"/><br>Education</li></a>
                <a href="#"><li><img src="static/images/Games.png"/><br>Games</li></a>
                <a href="#"><li><img src="static/images/Events.png"/><br>Events</li></a>
                <a href="#"><li><img src="static/images/Blogs.png"/><br>Blogs</li></a>
                <a href="#"><li><img src="static/images/Explorers.png"/><br>Explorers</li></a>
                <a href="#"><li><img src="static/images/Trips.png"/><br>Trips</li></a>
              </ul>           
            </div>

            <div class="col-lg-9 col-md-9 col-sm-9 maincol">

              <ul class="centermenu">
              <!-- ОПЯТЬ ??? НЕУДЕВИТЕЛЬНО ЧТО ВСЕ ПЛЫВЕТ )))-->
                <a href="#"><li>Home</li></a>
                <a href="#"><li>Animals</li></a>
                <a href="#"><li>Ancient</li></a>
                <a href="#"><li>Energy</li></a>
                <a href="#"><li>Environment</li></a>
                <a href="#"><li>Travel</li></a>
              </ul>
           
              <div class="block">

                <img src="static/images/lions.jpg"/>
                <h4>Lions Cubs Playing</h4>
                <p>Lion Cubs Playing African lion cubs play in the grass in the Okavango delta</p>
              </div>

              <div class="block">              
                <ul class="nav navbar-nav">
                  <li><a href="#">Latest News</a></li>
                  <li><a href="#" class="dropdown-toggle" data-toggle="dropdown">Most Recent  <span class="caret"></a>
                    <ul class="dropdown-menu">
                      <li><a href="#">Пункт1</a></li>
                      <li><a href="#">Пункт2</a></li>
                      <li><a href="#">Пункт3</a></li>
                      <li><a href="#">Пункт4</a></li>
                      <li><a href="#">Пункт5</a></li>
                    </ul>
                  </li>
                </ul>            
              </div>

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

      <div class="col-md-3 col-lg-3 col-sm-3 right-col">      
        <div class="block">Most Popular News</div>
        <div class="block">      
          <img src="static/images/snake.png"/>
          <h5>The Bite That Heals</h5>
        </div>
        <div class="block">
          <img src="static/images/strangerthannature.png"/>
          <h5>Stranger Than Nature</h5>
        </div>
      </div>   
         
    </div>
  </div>

  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <!-- Include all compiled plugins (below), or include individual files as needed -->
  <script src="static/js/bootstrap.js"></script>
</body>
</html>
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Спарсить данные с сайта
26 апр. 2024, в 07:20
2000 руб./за проект
Devops для видео сервиса
26 апр. 2024, в 06:46
1000 руб./в час
Найти ошибку flutter_map
26 апр. 2024, в 05:31
1000 руб./за проект
Ещё заказы