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

Question

das_hund @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

4 комментария

das_hund @das_hund Автор вопроса

я думал над этим сейчас попробую может прокатит

Написано более трёх лет назад
das_hund @das_hund Автор вопроса

Короче нет это хренота. Там вообще еще в режиме десктоп - все ряды вылезают наверх в строчку тянутся как бы. А при режиме 780 px - там тоже самое. там же колбаса. по четыре в ряд ничего не сохраняется

Написано более трёх лет назад
Jonh Doe @CodeByZen

А зачем тебе вообще старая версия? Возьми новую.

Написано более трёх лет назад
das_hund @das_hund Автор вопроса

я новую взял. последнюю. Посмотри внизу там код я выложил уже с новооцй версии

Написано более трёх лет назад

2 комментария

Ваш ответ на вопрос

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

Похожие вопросы

HTML

+1 ещё

Простой
Можно ли задать стили внешнему тегу на основе вложенного?
- 1 подписчик
- 7 часов назад
- 68 просмотров
1

ответ
CSS

Простой
Как лучше отобразить создаваемый нажатием div в grid контейнере?
- 1 подписчик
- вчера
- 51 просмотр
1

ответ
JavaScript

+1 ещё

Простой
Дергается анимация снега, почему и как исправить?
- 1 подписчик
- вчера
- 142 просмотра
0

ответов
HTML

+1 ещё

Средний
Как создать такую вот кнопку как на изображении?
- 2 подписчика
- вчера
- 218 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Как открыть CSS селектор при помощи onclick?
- 1 подписчик
- вчера
- 104 просмотра
1

ответ
CSS

Простой
Как заменить псевдокласс has?
- 1 подписчик
- 16 дек.
- 81 просмотр
1

ответ
CSS

Простой
Обязательно ли создавать контейнер?
- 1 подписчик
- 14 дек.
- 86 просмотров
1

ответ
CSS

Простой
Как добиться линий, как на скрине?
- 1 подписчик
- 14 дек.
- 144 просмотра
1

ответ
JavaScript

+2 ещё

Простой
Делаю видеоплеер и в полноэкранном режиме почему-то не видит div с моими контролами?
- 1 подписчик
- 13 дек.
- 81 просмотр
2

ответа
CSS

Простой
Не могу разобраться почему before не становится по центру li (Оставил код ниже чтобы более понятно)?
- 1 подписчик
- 13 дек.
- 140 просмотров
1

ответ
Показать ещё Загружается…

CRM Bitrix24 разработчик

World Vision Clinic • Москва

от 170 000 ₽

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

Frontend-разработчик JavaScript

div. • Ставрополь

от 40 000 до 90 000 ₽

Отладить код на JavaScript

18 дек. 2024, в 18:35

500 руб./в час

Автоматизировать задачи с помощью Python

18 дек. 2024, в 18:34

500 руб./в час

Разработка одностраничного сайта

18 дек. 2024, в 18:33

500 руб./в час

Answer 1 · 2015-04-24 14:53:09

Дима Паутов @bootd Куратор тега CSS

Гугли и ты откроешь врата знаний!

Ну может стоит зайти на офф. сайт и там глянуть?
А какая версия? Просто в новой совсем другие классы для создания сетки!

Ответ написан более трёх лет назад

4 комментария

Answer 2 · 2015-04-24 15:19:55

Jonh Doe @CodeByZen

php, js, my/mssql, sqlite, html, css, it-consult

оберни row в container-flid и вместо row надо row-fluid

Ответ написан более трёх лет назад

4 комментария

Answer 3 · 2015-04-24 15:28:03

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

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

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

Минуточку внимания

Войдите на сайт