Answer the question
In order to leave comments, you need to log in
T
T
timtimIT2015-05-06 03:15:14
timtimIT, 2015-05-06 03:15:14
Why does the following happen: there is a bootstrap 3 grid, the row is divided into two columns, why does one column slide down?
Please tell me why the following happens: there is a bootstrap 3 grid, the row (row) is divided into 2 columns col-9 and col-3 . Col-3 slides down, in the developer it shows that the row row is closed before col-3 , although everything is closed in index.html as it should, div row: col-9 col-3 / div. What is the reason for this, how to fix it?
1 answer(s)
@mlnkv
S
Sergey Melnikov, 2015-05-06 @mlnkv
You need to be more accurate, follow the indents. Do you have an extra div tag somewhere?
<!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>
Similar questions
N
Nikita2020-02-17 00:36:27
How can I make the header take the color from the nearest component?
4Reply
W
C
M
A
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question