X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Как отменить выравнивание блоков в линию bottstrap? Код и картинка прилагается.
pikiviki
pikiviki
Topic Starter сообщение 10.7.2015, 13:59; Ответить: pikiviki
Сообщение #1


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

Здравствуйте уважаемые форумчане. Столкнулся с проблемой при использовании bootstrap.
В bootastrpa по умолчанию блоки выравниваются в линию вот так http://codepen.io/anon/pen/PqeOOM
и следующая линия блоков находится на расстоянии самого длинного блока в первой линии блоков. Как сделать так чтобы каждый блок второй линии блоков был сразу же под каждым блоком первой линии. 

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

b229c16d8795.jpg



Сообщение отредактировал pikiviki - 10.7.2015, 14:02
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
yury_mw
yury_mw
сообщение 10.7.2015, 19:02; Ответить: yury_mw
Сообщение #2


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.7.2015, 19:15
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
pikiviki
pikiviki
Topic Starter сообщение 10.7.2015, 20:54; Ответить: pikiviki
Сообщение #3


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


Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
« Предыдущая тема · Программная часть · Следующая тема »
 
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Горячая тема (нет новых ответов) Как вы отдыхаете от работы за компом
 151 adw-kupon.ru 19823 Вчера, 13:52
автор: Vmir
Открытая тема (нет новых ответов) Как вы бросили работу и перешли на заработок с сайтов?
 20 uahomka 3450 Вчера, 11:54
автор: Skyworker
Открытая тема (нет новых ответов) Как в пушсетках покупают по 100-200 тысяч кликов за день?
 1 Boymaster 528 Вчера, 11:45
автор: Skyworker
Горячая тема (нет новых ответов) Как вывести деньги в Украине с заблокированного Юмани ?
 30 freeax 5018 20.4.2024, 16:49
автор: Liudmila
Открытая тема (нет новых ответов) Арбитражники, как ведете учет расходов и доходов?
 13 Boymaster 2024 20.4.2024, 15:06
автор: Boymaster


 

Режим отображения: Стандартный · Переключить на: Линейный · Переключить на: Древовидный

Подписка на тему · Сообщить другу · Версия для печати · Подписка на этот форум

RSS Текстовая версия Сейчас: 24.4.2024, 9:45

Дизайн

 
Форум IP.Board © 2024  IPS, Inc.
Лицензия зарегистрирована на: MaulNet
Jooble
Форум IP.Board © IPS, Inc.
Лицензия зарегистрирована на: MaulNet