Задать вопрос
@das_hund
css

Почему верстка grid в twitter bootstrap сьезжает и не адаптивная при уменьшении экрана?

Сабж. 

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    
    <link rel="stylesheet" type="text/css" media="all" href="css/bootstrap-responsive.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/bootstrap-responsive.min.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/bootstrap.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/bootstrap.min.css" />
<style>

.subtext, .header-text, .subtext2 {
	font-size: 80%;
}
</style>
  </head>
  
  
    <body>

<div class="row">
  <div class="span3">
  <img class="pict" src="/img/pict1.png" />
						<div class="text-block">
							<p class="header-text">RIBA RIBA RIBA</p>
							<p class="subtext">RIBA RIBA RIBA</p>
							<p class="subtext">RIBA RIBA RIBA</p>
							<p class="subtext">RIBA RIBA RIBA</p>
						</div>
						<div class="clear-fix"></div></div>
  <div class="span3"><img class="pict" src="/img/pict4.png" />
					 	<div class="text-block">
							<p class="header-text">RIBA RIBA RIBA</p>
							<p class="header-text">RIBA RIBA RIBA</p>
							<p class="subtext">RIBA RIBA RIBA</p>
						</div>										
					  </div>
  <div class="span3"><img class="pict" src="/img/pict5.png" />
					 	<div class="text-block">
							<p class="header-text">RIBA RIBA RIBA</p>
							<p class="header-text">RIBA RIBA RIBA</p>
							<p class="subtext">RIBA RIBA RIBA</p>
						</div>
  </div>
  <div class="span3"><img class="pict" src="/img/pict8.png" style="margin-left: 10%" />
						<div class="text-block">
							<p class="header-text">RIBA RIBA RIBA</p>
							<p class="subtext">RIBA RIBA RIBA</p>
						</div>
						
						<div class="clear-fix"></div>
  </div>
</div>
    
<div class="row">
  <div class="span3"><img class="pict" src="/img/pict2.png" />
						<div class="text-block" >
							<p class="header-text">RIBA RIBA RIBA</p>
							<p class="subtext2">RIBA RIBA RIBA</p>
							<p class="subtext2">RIBA RIBA RIBA</p>
							<p class="subtext2">RIBA RIBA RIBA</p>
							<p class="subtext2">RIBA RIBA RIBA</p>
							<p class="subtext2">RIBA RIBA RIBA</p>
							<!--<p class="header-text">НОВОМУ ЗАКАЗЧИКУ</p>
							<p class="subtext2">О видах сайтов</p>
							<p class="subtext2">О маркетинге в интернете</p>
							<p class="subtext2">О составлении тех. задания</p>
							<p class="subtext2">О процессе разработки</p>
							<p class="subtext2">И раскрутки сайта</p>
							<p class="subtext2">Пример договор</p>-->
						</div>
						<div class="clear-fix"></div></div>
  <div class="span6">
  <div class="row">
      <div class="span3"><div style="width: 38%; float: left; margin-left: 12%; ">
						<img class="pict" src="/img/nav-orient.png" style="width: 57px; float: none; display: inline;" />	
					    <p class="header-text" style="font-size: 72%; font-weight: bold; margin: 7px 0px 0px; color: #32ACE0;">RIBA RIBA RIBA НА</p>
						<p class="header-text" style="margin: 0px 0px 14px; color: #32ACE0; font-size: 72%; font-weight: bold;">RIBA RIBA RIBA</p>		</div></div>
      <div class="span3"><div style="width: 38%; float: left; margin-left: 5%; ">				
						<img class="pict" src="/img/handshake.png" style="width: 72px; float: none; display: inline;" />	
					    <p class="header-text" style="font-size: 72%; font-weight: bold; margin: 7px 0px 0px; color: #32ACE0">RIBA RIBA RIBA </p>
						<p class="header-text" style="margin: 0px 0px 14px; color: #32ACE0; font-size: 72%; font-weight: bold;">RIBA RIBA RIBA</p>				
						</div>
						<div class="clear-fix"></div></div>
  </div>
  </div>
  <div class="span3"><img class="pict" src="/img/pict6.png" />
						<div class="text-block">
							<p class="header-text">RIBA RIBA RIBARIBA RIBA RIBA</p>
							<p class="header-text">RIBA RIBA RIBA</p>
							<p class="subtext2">RIBA RIBA RIBA</p>
							<p class="subtext2">RIBA RIBA RIBA</p>
							<p class="subtext2">RIBA RIBA RIBA</p>
							<p class="subtext2">RIBA RIBA RIBA</p>
						</div>
						<div class="clear-fix"></div></div>
</div>

<div class="row">
  <div class="span3"><p class="headerline2">RIBA RIBA RIBA</p>
						<img class="pict" src="/img/review1.png" />
						<div class="text-block p-top-zero" >
							<p class="header-text"><span style="padding-left: 5px; ">RIBA RIBA RIBA</span><a href="https://vk.com/gelo_kurash"><img src="/img/vk.png" /></a></p>
							<p class="subtext" style="margin-top: 6px; " >RIBA RIBA RIBA</p>
							<p class="subtext">RIBA RIBA RIBA</p>
							<p class="subtext">RIBA RIBA RIBA</p>
							<a class="subtext link_fwd" style="padding-top: 0px; " href="">Читать далее...</a>
						</div>
						<div class="clear-fix"></div></div>
  <div class="span6">
  <div class="row">
  	 <div class="span3"><div style="width: 38%; float: left; margin-left: 12%; ">				
						<img class="pict" src="/img/handshake.png" style="width: 72px; float: none; display: inline;" />	
					    <p class="header-text" style="font-size: 72%; font-weight: bold; margin: 7px 0px 0px; color: #32ACE0; "> RIBA RIBA RIBARIBA RIBA RIBA</p>
						<p class="header-text" style="margin: 0px 0px 14px; color: #32ACE0; font-size: 72%; font-weight: bold;">RIBA RIBA RIBARIBA RIBA RIBA</p>				
						</div>				
						
						</div>
  	 <div class="span3"><div style="width: 38%; float: left; margin-left: 5%;  ">
						<img class="pict" src="/img/seo-lamp.png" style="width: 57px; float: none; display: inline;" />	
					    <p class="header-text" style="font-size: 72%; font-weight: bold; margin: 7px 0px 0px; color: #32ACE0;"> RIBA RIBA RIBARIBA RIBA RIBA,</p>
						<p class="header-text" style="margin: 0px 0px 14px; color: #32ACE0; font-size: 72%; font-weight: bold;">RIBA RIBA RIBARIBA RIBA RIBA</p>		
						</div></div>
  </div>
  </div>
  <div class="span3"><p class="headerline2">RIBA RIBA RIBA</p>
					
						<img class="pict" style="width:79px;" src="/img/client4.png" />
						<img class="pict" style="width:150px;" src="/img/client1.png" />
						<div class="clear-fix"></div>
						
						
						<img class="pict client2-logo-pict" src="/img/client2.png" />
						<p class="client2-logo">RIBA RIBA RIBARIBA RIBA RIBA</p></div>
</div> 
  </body>
</html>
  • Вопрос задан
  • 530 просмотров
Комментировать
Подписаться 2 Оценить Комментировать
Пригласить эксперта
Ответы на вопрос 3
bootd
@bootd Куратор тега CSS
Гугли и ты откроешь врата знаний!
Ну может стоит зайти на офф. сайт и там глянуть?
А какая версия? Просто в новой совсем другие классы для создания сетки!
Ответ написан
4 комментария
4 комментария
CodeByZen
@CodeByZen
php, js, my/mssql, sqlite, html, css, it-consult
оберни row в container-flid и вместо row надо row-fluid
Ответ написан
4 комментария
4 комментария
@das_hund Автор вопроса 
<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<style>

.subtext, .header-text, .subtext2 {
	font-size: 80%;
}
</style>
</head>
<body>

<div class="container">
<div class="row">
  <div class="col-md-2">
  <img class="pict" src="/img/pict1.png" />
						<div class="text-block">
							<p class="header-text">RIBA RIBA RIBA</p>
							<p class="subtext">RIBA RIBA RIBA</p>
							<p class="subtext">RIBA RIBA RIBA</p>
							<p class="subtext">RIBA RIBA RIBA</p>
						</div>
						<div class="clear-fix"></div></div>
  <div class="col-md-2"><img class="pict" src="/img/pict4.png" />
					 	<div class="text-block">
							<p class="header-text">RIBA RIBA RIBA</p>
							<p class="header-text">RIBA RIBA RIBA</p>
							<p class="subtext">RIBA RIBA RIBA</p>
						</div>										
					  </div>
  <div class="col-md-2"><img class="pict" src="/img/pict5.png" />
					 	<div class="text-block">
							<p class="header-text">RIBA RIBA RIBA</p>
							<p class="header-text">RIBA RIBA RIBA</p>
							<p class="subtext">RIBA RIBA RIBA</p>
						</div>
  </div>
  <div class="col-md-2"><img class="pict" src="/img/pict8.png" style="margin-left: 10%" />
						<div class="text-block">
							<p class="header-text">RIBA RIBA RIBA</p>
							<p class="subtext">RIBA RIBA RIBA</p>
						</div>
						
						<div class="clear-fix"></div>
  </div>
</div>
    
<div class="row">
  <div class="col-md-2"><img class="pict" src="/img/pict2.png" />
						<div class="text-block" >
							<p class="header-text">RIBA RIBA RIBA</p>
							<p class="subtext2">RIBA RIBA RIBA</p>
							<p class="subtext2">RIBA RIBA RIBA</p>
							<p class="subtext2">RIBA RIBA RIBA</p>
							<p class="subtext2">RIBA RIBA RIBA</p>
							<p class="subtext2">RIBA RIBA RIBA</p>						
						</div>
						<div class="clear-fix"></div></div>
  <div class="col-md-4">
  <div class="row">
      <div class="col-md-2"><div style="width: 38%; float: left; margin-left: 12%; ">
						<img class="pict" src="/img/nav-orient.png" style="width: 57px; float: none; display: inline;" />	
					    <p class="header-text" style="font-size: 72%; font-weight: bold; margin: 7px 0px 0px; color: #32ACE0;">RIBA RIBA RIBA НА</p>
						<p class="header-text" style="margin: 0px 0px 14px; color: #32ACE0; font-size: 72%; font-weight: bold;">RIBA RIBA RIBA</p>		</div></div>
      <div class="col-md-2"><div style="width: 38%; float: left; margin-left: 5%; ">				
						<img class="pict" src="/img/handshake.png" style="width: 72px; float: none; display: inline;" />	
					    <p class="header-text" style="font-size: 72%; font-weight: bold; margin: 7px 0px 0px; color: #32ACE0">RIBA RIBA RIBA </p>
						<p class="header-text" style="margin: 0px 0px 14px; color: #32ACE0; font-size: 72%; font-weight: bold;">RIBA RIBA RIBA</p>				
						</div>
						<div class="clear-fix"></div></div>
  </div>
  </div>
  <div class="col-md-2"><img class="pict" src="/img/pict6.png" />
						<div class="text-block">
							<p class="header-text">RIBA RIBA RIBARIBA RIBA RIBA</p>
							<p class="header-text">RIBA RIBA RIBA</p>
							<p class="subtext2">RIBA RIBA RIBA</p>
							<p class="subtext2">RIBA RIBA RIBA</p>
							<p class="subtext2">RIBA RIBA RIBA</p>
							<p class="subtext2">RIBA RIBA RIBA</p>
						</div>
						<div class="clear-fix"></div></div>
</div>

<div class="row">
  <div class="col-md-2"><p class="headerline2">RIBA RIBA RIBA</p>
						<img class="pict" src="/img/review1.png" />
						<div class="text-block p-top-zero" >
							<p class="header-text"><span style="padding-left: 5px; ">RIBA RIBA RIBA</span><a href="https://vk.com/gelo_kurash"><img src="/img/vk.png" /></a></p>
							<p class="subtext" style="margin-top: 6px; " >RIBA RIBA RIBA</p>
							<p class="subtext">RIBA RIBA RIBA</p>
							<p class="subtext">RIBA RIBA RIBA</p>
							<a class="subtext link_fwd" style="padding-top: 0px; " href="">Читать далее...</a>
						</div>
						<div class="clear-fix"></div></div>
  <div class="col-md-4">
  <div class="row">
  	 <div class="col-md-2"><div style="width: 38%; float: left; margin-left: 12%; ">				
						<img class="pict" src="/img/handshake.png" style="width: 72px; float: none; display: inline;" />	
					    <p class="header-text" style="font-size: 72%; font-weight: bold; margin: 7px 0px 0px; color: #32ACE0; "> RIBA RIBA RIBARIBA RIBA RIBA</p>
						<p class="header-text" style="margin: 0px 0px 14px; color: #32ACE0; font-size: 72%; font-weight: bold;">RIBA RIBA RIBARIBA RIBA RIBA</p>				
						</div>				
						
						</div>
  	 <div class="col-md-2"><div style="width: 38%; float: left; margin-left: 5%;  ">
						<img class="pict" src="/img/seo-lamp.png" style="width: 57px; float: none; display: inline;" />	
					    <p class="header-text" style="font-size: 72%; font-weight: bold; margin: 7px 0px 0px; color: #32ACE0;"> RIBA RIBA RIBARIBA RIBA RIBA,</p>
						<p class="header-text" style="margin: 0px 0px 14px; color: #32ACE0; font-size: 72%; font-weight: bold;">RIBA RIBA RIBARIBA RIBA RIBA</p>		
						</div></div>
  </div>
  </div>
  <div class="col-md-2"><p class="headerline2">RIBA RIBA RIBA</p>
					
						<img class="pict" style="width:79px;" src="/img/client4.png" />
						<img class="pict" style="width:150px;" src="/img/client1.png" />
						<div class="clear-fix"></div>
						
						
						<img class="pict client2-logo-pict" src="/img/client2.png" />
						<p class="client2-logo">RIBA RIBA RIBARIBA RIBA RIBA</p></div>
</div> 
</div>
  </body>
</html>
Ответ написан
2 комментария
2 комментария
Ваш ответ на вопрос

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

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Trainee - IT Support
move2usajobs LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Доработка мода на версии 1.12.2 для Minecraft
15 нояб. 2024, в 18:34
45000 руб./за проект
Ищу специалиста по настройке рекламы
15 нояб. 2024, в 18:08
10000 руб./за проект
Внести изменения/правки в исходный код ardupilot
15 нояб. 2024, в 17:13
100000 руб./за проект
Ещё заказы