Перейти к содержимому



Как отменить выравнивание блоков в линию bottstrap? Код и картинка прилагается.

#1

Поделиться сообщением #1



pikiviki

pikiviki
  • Неактивные
  • 4 сообщений
  • Репутация: 0
0

Отправлено 10 Июль 2015 - 12:59

Хочу сразу же извинится за опечатку в заголовке. 

 

Здравствуйте уважаемые форумчане. Столкнулся с проблемой при использовании bootstrap.

В bootastrpa по умолчанию блоки выравниваются в линию вот так http://codepen.io/anon/pen/PqeOOM

и следующая линия блоков находится на расстоянии самого длинного блока в первой линии блоков. Как сделать так чтобы каждый блок второй линии блоков был сразу же под каждым блоком первой линии. 

 

Вот более наглядно. 

 

b229c16d8795.jpg

 


 

 

Сообщение отредактировал pikiviki: 10 Июль 2015 - 13:02

  • 0

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85
Советую обратить внимание на следующее:
  1. Выравнивание баннера
  2. Какой стилевой блок отвечает за выравнивание горизонтального меню?
  3. Подскажите как исправить ошибки в верстке сайта
  4. Установить баннер, чтобы он отображался на всех страницах
  5. Как сделать на страниц блок с логотипами

#2

Поделиться сообщением #2



yury

yury
  • Пользователь
  • 632 сообщений
  • Репутация: 181

Отправлено 10 Июль 2015 - 18:02

@pikiviki, скрипт http://masonry.desandro.com/ вам в помощь.

 

Как то так:

<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<style>
*{
  padding:0;
  margin:0;
}
ul.grid{
  width:100%;
  list-style:none;
}
ul.grid li{
  width:30%;
  float:left;
  background:#ccc;
  margin:5px 0 0 5px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://masonry.desandro.com/masonry.pkgd.min.js"></script>
<script>
$(document).ready( function() {
  $('.grid').masonry({
    itemSelector: '.grid li'
  });
});
</script>
</head>
<body>
<ul class="grid">
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo ratione unde nam iure odit autem quibusdam sunt enim harum dolore amet recusandae aliquam labore, ea saepe nisi provident ducimus repellat.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, dolore?</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing edivt. Fugit voluptatibus saepe dolorem ullam, assumenda quisquam sequi officia accusamus natus molestias vero quod excepturi magni, nihil fuga vitae. Nesciunt ab maxime inventore expdivcabo suscipit sed asperiores, omnis labore temporibus nam, dolore.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing edivt. Ipsa nobis accusamus ad facere magni, minima nostrum temporibus consectetur at eveniet, porro saepe tenetur, molestiae, repellat quod debitis non quibusdam dolorem vitae. Ut dignissimos, a moldivtia quaerat voluptatum enim ab illum.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing edivt. Sapiente, numquam.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing edivt. Nostrum impedit cupiditate, suscipit officia expdivcabo? Illum non distinctio aut odio iste obcaecati harum soluta a totam, nisi, sed quidem repellat nesciunt.</li>
</ul>
</body>
</html>

Сообщение отредактировал yury: 10 Июль 2015 - 18:15

  • 0

#3

Поделиться сообщением #3



pikiviki

pikiviki
    Topic Starter
  • Неактивные
  • 4 сообщений
  • Репутация: 0

Отправлено 10 Июль 2015 - 19:54

@yury, спасибо вам большое вы мне очень помогли. 


  • 0


Оформление форума – IPBSkins.ru