Галерея без отступов на бутстрап

@Konstan · Регистрация: 03.11.2015

Студворк — интернет-сервис помощи студентам

Здравствуйте , я наверное уже достал многих своими глупыми вопросами но ... соррян .
В гугле смотрел но именно того что мне нужно так и не нашёл . (скорей всего просто искал не правильно)
Но всё-же подскажите как сделать именно такую галерею (скрин приложил)
PS : ещё интересно можно ли сделать ховер чтоб на картинке всплывал тот блок (как на скрине) без js ?

@AlexZaw · 29.10.2017, 01:21

Такая галерея замечательно верстается без использования сторонней сетки любым удобным способом, хоть на инлайн блоках, хоть на флоатах, хоть на флексах. Бутстрапом я не пользуюсь из-за того что запаришься переопределять его стили и поэтому мало с ним знаком , может там и есть контейнер без отступов который бы позволил прижать блоки к краям.
Ну а со всплываюшим блоком совсем просто - блокам с картинкой задаем относительное позиционирование, а всплывающему абсолютное, и дальше решаем как этот блок появляется, просто делаем непрозрачным из прозрачного или с какой либо анимацией...

@Konstan · 29.10.2017, 01:29 **[ТС]**

Сообщение от AlexZaw

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

Подскажи самый простой способ )

@AlexZaw · 29.10.2017, 01:40

код выдернут из проекта, так что на префиксы внимания не обращаем:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<section class="work">
 
    <div class="work__item">
</div>
    <div class="work__item">
</div>
    <div class="work__item">      
</div>
    <div class="work__item">
</div>
    <div class="work__item">    
</div>
    <div class="work__item">   
</div>
    <div class="work__item">
</div>
    <div class="work__item">  
</div>
</section>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.work {
  max-height: 600px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
}
 
.work__item {
  box-sizing: border-box;
  min-width: 25%;
  background: url(http://placekitten.com/g/400/400) no-repeat;
  min-height: 300px;
    -ms-flex-preferred-size: 300px;
  flex-basis: 300px;
}

Qwerty_Wasd · 29.10.2017, 02:03

AlexZaw,

Сообщение от AlexZaw

может там и есть контейнер без отступов который бы позволил прижать блоки к краям

да есть и переопределять ничего не нужно. Просто добавляешь свой класс и работаешь как обычно. Хотя вы правы, определенная морока есть с фреймворком. Например при указании дочерних элементов в стилях. Нужно четко понимать как сформирована сетка, по какому принципу строится. Ну а для вас, Konstan, пример на Bootstrap:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="container-fluid">
  <div class="row">
    <div class="col-md-3 my_class"><div class="slide"><span><p>Title goes here</p><p>bla-bla-bla-bla-bla-bla<br>bla-bla-bla-bla-bla-bla<br>bla-bla-bla-bla-bla-bla</p></span></div></div>
    <div class="col-md-3 my_class"><div class="slide"><span><p>Title goes here</p><p>bla-bla-bla-bla-bla-bla<br>bla-bla-bla-bla-bla-bla<br>bla-bla-bla-bla-bla-bla</p></span></div></div>
    <div class="col-md-3 my_class"><div class="slide"><span><p>Title goes here</p><p>bla-bla-bla-bla-bla-bla<br>bla-bla-bla-bla-bla-bla<br>bla-bla-bla-bla-bla-bla</p></span></div></div>
    <div class="col-md-3 my_class"><div class="slide"><span><p>Title goes here</p><p>bla-bla-bla-bla-bla-bla<br>bla-bla-bla-bla-bla-bla<br>bla-bla-bla-bla-bla-bla</p></span></div></div>
  </div>
 <div class="row">
    <div class="col-md-3 my_class"><div class="slide"><span><p>Title goes here</p><p>bla-bla-bla-bla-bla-bla<br>bla-bla-bla-bla-bla-bla<br>bla-bla-bla-bla-bla-bla</p></span></div></div>
    <div class="col-md-3 my_class"><div class="slide"><span><p>Title goes here</p><p>bla-bla-bla-bla-bla-bla<br>bla-bla-bla-bla-bla-bla<br>bla-bla-bla-bla-bla-bla</p></span></div></div>
    <div class="col-md-3 my_class"><div class="slide"><span><p>Title goes here</p><p>bla-bla-bla-bla-bla-bla<br>bla-bla-bla-bla-bla-bla<br>bla-bla-bla-bla-bla-bla</p></span></div></div>
    <div class="col-md-3 my_class"><div class="slide"><span><p>Title goes here</p><p>bla-bla-bla-bla-bla-bla<br>bla-bla-bla-bla-bla-bla<br>bla-bla-bla-bla-bla-bla</p></span></div></div>
  </div>
</div>

CSS
1
2
3
.my_class{position:relative;border:1px solid red;height:300px;background:url(https://dummyimage.com/600x400/e0e0e0/000000.png)no-repeat;background-size:100% 100%;}
.slide{position:absolute;height:60%;width:60%;border:1px solid red;top:50%;left:50%;transform:translate(-50%, -50%);background:rgba(5, 227, 182, 1);opacity:0;text-align:center;padding-top:30px;}
.slide:hover{opacity:1;}

Песочница

Новые блоги и статьи Все статьи Все блоги /
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Киев стоит - украинская песня zorxor 28.01.2026 wfWdiRqdTxc О Господи, Вечный, Ты . . . Я помоги, Бесконечный. . . Я прошу Ты. . . Я погибаю, спаси. . . Я прошу Тебя Вечный. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .
влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .

@Konstan 2 / 2 / 4 Регистрация: 03.11.2015 Сообщений: 191

	Галерея без отступов на бутстрап 29.10.2017, 00:25. Показов 1668. Ответов 4 Метки нет (Все метки) Здравствуйте , я наверное уже достал многих своими глупыми вопросами но ... соррян . В гугле смотрел но именно того что мне нужно так и не нашёл . (скорей всего просто искал не правильно) Но всё-же подскажите как сделать именно такую галерею (скрин приложил) PS : ещё интересно можно ли сделать ховер чтоб на картинке всплывал тот блок (как на скрине) без js ? Миниатюры 0

@AlexZaw Модератор 2379 / 1739 / 677 Регистрация: 07.08.2016 Сообщений: 4,093
	29.10.2017, 01:21
	Такая галерея замечательно верстается без использования сторонней сетки любым удобным способом, хоть на инлайн блоках, хоть на флоатах, хоть на флексах. Бутстрапом я не пользуюсь из-за того что запаришься переопределять его стили и поэтому мало с ним знаком , может там и есть контейнер без отступов который бы позволил прижать блоки к краям. Ну а со всплываюшим блоком совсем просто - блокам с картинкой задаем относительное позиционирование, а всплывающему абсолютное, и дальше решаем как этот блок появляется, просто делаем непрозрачным из прозрачного или с какой либо анимацией... 0

Галерея без отступов на бутстрап

Решение