Некорректно работает сетка Bootstrap

@Kolya1997 · Регистрация: 01.05.2019

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

Добрый день, фронтедщики!
Я начинающий в этом деле. Подскажите, по какой причине не работают отступы между колонками в Bootstrap? Вот силка на мое творение https://codepen.io/kolya_soroka15/pen/mNOmEM
В низу страницы есть четыре блока по 3 колонки каждый, но они схлопываются. Помогите, пожалуйста, а то уже нет ни нервов ни сил, а пилить костиль не очень хочется.

@gogolik · 09.08.2019, 13:33

Что не так?
Подозреваю, что нужно не col-xl использовать

@Kolya1997 · 09.08.2019, 14:31 **[ТС]**

Между колонками которые я обвел бордером, должен быть стадартный отступ по 30пх, а их нет. Я менял классы, при всех остальных тоже самое.

@tgarl · 09.08.2019, 16:03

а с чего вдруг между col-xl должен быть внешний отступ?

добавь внутрь блок container

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div class="col-xl-3 "><div class="container box">
          <h4>Koc Koi Tomi</h4>
          <p>Lorem ipsum is dummy lorem very dumy</p>
          <button>Know More</button>
         </div>
       </div>
       <div class="col-xl-3 "><div class="container box">
         <h4>Koc Koi Tomi</h4>
          <p>Lorem ipsum is dummy lorem very dumy</p>
          <button>Know More</button>
          </div>
       </div>
       <div class="col-xl-3 "><div class="container box">
         <h4>Koc Koi Tomi</h4>
          <p>Lorem ipsum is dummy lorem very dumy</p>
          <button>Know More</button>
          </div>
       </div>
       <div class="col-xl-3 "><div class="container box">
        <h4>Koc Koi Tomi</h4>
          <p>Lorem ipsum is dummy lorem very dumy</p>
          <button>Know More</button>
          </div>
       </div>

@Kolya1997 · 09.08.2019, 16:27 **[ТС]**

Bootsrtrap же автоматически задает отступы между колонками. Вот пример с моего второго проекта

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div class="row foto">
      <div class="col-md-4">
        <img src="img/gallery1.png" alt="">
        <div class="description">
          <h4>Claritas Etiam Processus</h4>
          <p>Photography, Nature</p>
        </div>
      </div>
      <div class="col-md-4">
        <img src="img/gallery2.png" alt="">
        <div class="description">
          <h4>Quam Nutamus Farum</h4>
          <p>Graphic Design, Mock-Up</p>
        </div>
      </div>
      <div class="col-md-4">
        <img src="img/gallery3.png" alt="">
        <div class="description">
          <h4>Usus Legentis Videntur</h4>
          <p>Photography, Holiday</p>
        </div>
      </div>

@tgarl · 09.08.2019, 16:42

проверьте, у вас там padding - внутренние отступы, и нет рамки которую вы задали в своем коде при помощи .box и не видите что блоки идут впритык. Задайте бордер своей колонке <div class="col-md-4"> и все увидите.
Поэтому вы можете сделать внутреннюю обертку, не обязательно как я, которой присвоите .box +добавите отступ

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .	SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .
SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .

@Kolya1997 0 / 0 / 0 Регистрация: 01.05.2019 Сообщений: 3

	Некорректно работает сетка Bootstrap 09.08.2019, 12:18. Показов 2128. Ответов 5 Метки bootstrap 4, scss, верстка html css (Все метки) Добрый день, фронтедщики! Я начинающий в этом деле. Подскажите, по какой причине не работают отступы между колонками в Bootstrap? Вот силка на мое творение https://codepen.io/kolya_soroka15/pen/mNOmEM В низу страницы есть четыре блока по 3 колонки каждый, но они схлопываются. Помогите, пожалуйста, а то уже нет ни нервов ни сил, а пилить костиль не очень хочется. 0

@gogolik Супер-модератор 3957 / 2072 / 831 Регистрация: 13.03.2010 Сообщений: 6,829
	09.08.2019, 13:33
	Что не так? Подозреваю, что нужно не col-xl использовать Миниатюры 0

@Kolya1997 0 / 0 / 0 Регистрация: 01.05.2019 Сообщений: 3
	09.08.2019, 14:31 [ТС]
	Между колонками которые я обвел бордером, должен быть стадартный отступ по 30пх, а их нет. Я менял классы, при всех остальных тоже самое. 0

@tgarl 467 / 431 / 117 Регистрация: 15.02.2012 Сообщений: 1,951
	09.08.2019, 16:42
	проверьте, у вас там padding - внутренние отступы, и нет рамки которую вы задали в своем коде при помощи .box и не видите что блоки идут впритык. Задайте бордер своей колонке <div class="col-md-4"> и все увидите. Поэтому вы можете сделать внутреннюю обертку, не обязательно как я, которой присвоите .box +добавите отступ 0

Некорректно работает сетка Bootstrap

Решение