Миниатюра Gapless или галерея контента в начальной загрузке

Я пытаюсь создать адаптивную галерею миниатюр с помощью начальной загрузки 3.

Я хочу, чтобы он был менее похож на границы, а также наложенный анимированный текст. Кое-что близко к этому (найденный на lovebootstrap.com) http://www.riseragency.com/portfolio/

Но во всех примерах галереи миниатюр начальной загрузки, которую я могу найти, есть большие пробелы, основанные на работе фрейма, как это http://www.bootply.com/70929

Но я не могу получить разрыв сетки, где миниатюры соприкасаются друг с другом.

Как я могу уменьшить разрыв, как пример сайта выше.

Источник

2 ответа

Решение

Вам также необходимо удалить стили границ, полей и отступов из .thumbnail класс, а также очень хорошие советы @jme11:

#portfolio .thumbnail{
  border:0px;
  border-radius:0px;
  margin:0px;
  padding:0px;
}

Изменить на свой Bootply

Источник

Если вы хотите получить тот же эффект, что и на сайте riseagency, вы можете использовать плагин masonry.

Если вы просто хотите удалить промежуток между миниатюрами в своем примере загрузки, то вы можете добавить идентификатор в строку, содержащую ваше портфолио, например:

<div id="portfolio" class="row">

и затем добавьте следующие правила CSS:

#portfolio.row {
   margin:0;
}
#portfolio .col-xs-3 {
  padding:0;
}

Это удалит стандартное отрицательное поле строки и отступы от столбцов. Вы не хотите делать это для всего своего сайта, поэтому я добавил идентификатор, чтобы настроить правила.

Источник
Другие вопросы по тегам