Почему верстка 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>

Вопрос задан более трёх лет назад
528 просмотров

Комментировать

Подписаться 2 Оценить Комментировать

Пригласить эксперта

Ответы на вопрос 3

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

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

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

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

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

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

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

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

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

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

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

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

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

Войти через центр авторизации

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

CSS

Простой
Как сделать плавную анимацию изображения при наведении/убирании курсора мыши?
- 1 подписчик
- 12 часов назад
- 84 просмотра
2

ответа
CSS

Простой
Как сделать, чтобы блоки занимали половину доступной ширины, а последний нечётный — всю?
- 1 подписчик
- 16 часов назад
- 105 просмотров
4

ответа
JavaScript

+2 ещё

Простой
Галерея 3DWave. Перевел HTML в JS. Не работает.?
- 1 подписчик
- вчера
- 77 просмотров
0

ответов
CSS

Простой
Как задать универсальный @keyframes для нескольких разных блоков, без скриптов?
- 1 подписчик
- вчера
- 70 просмотров
1

ответ
JavaScript

+4 ещё

Простой
Почему при загрузке страницы происходит быстрый скролл вниз, а затем вверх?
- 1 подписчик
- вчера
- 86 просмотров
1

ответ
CSS

Простой
Как в CSS повернуть горизонтальный сайт на 90° чтобы на смартофне можно было горизонтально смотреть?
- 4 подписчика
- вчера
- 1046 просмотров
2

ответа
JavaScript

+3 ещё

Средний
Swiper js, как сделать чтобы при фокусе по табу на ссылке внутри слайда не исчезала пагинация?
- 1 подписчик
- 30 апр.
- 45 просмотров
0

ответов
CSS

Простой
Как применить свойство к псевдоэлементу?
- 3 подписчика
- 29 апр.
- 230 просмотров
2

ответа
HTML

+1 ещё

Простой
Почему не срабатывает анимация при исчезновение?
- 1 подписчик
- 28 апр.
- 49 просмотров
1

ответ
HTML

+1 ещё

Средний
Как зафиксировать данные блоки, чтобы не было разрывов?
- 1 подписчик
- 28 апр.
- 70 просмотров
1

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

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

вАйТи

от 5 000 до 25 000 ₽

Trainee - IT Support

move2usajobs.com LLC • Лос-Анджелес

от 2 000 до 4 000 $

React разработчик

Uptrade

от 150 000 до 200 000 ₽

Автоматизация отчетности сектора подбора и развития персонала в 1С

02 мая 2024, в 05:49

7000 руб./за проект

Изменение темы сайта на ghost cms

02 мая 2024, в 04:47

5000 руб./за проект

Symfony, Vue - Сервис автоматизации бизнеса натяжных потолков

02 мая 2024, в 04:44

700 руб./в час

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 сьезжает и не адаптивная при уменьшении экрана?

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

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

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