Bootstrap 5 колонок: Делаем 5 адаптивных колонок для bootstrap 3 и bootstrap 4

Колонки. Разметка · Bootstrap v5.0.2

Внимание! Обязательно прочитайте страницу Система сеток, прежде чем углубляться в то, как изменять и настраивать столбцы сетки.

Как это работает

• Столбцы основаны на архитектуре flexbox. Это означает, что у нас есть опции для изменения отдельных столбцов и изменения групп столбцов на уровне строк. Вы выбираете как столбцы увеличить, уменьшить или изменить иным образом.

• При построении макетов сетки весь контент помещается в столбцы. Иерархия сетки Bootstrap переходит от контейнера к строке столбца вашего контента. В редких случаях вы можете комбинировать контент и колонку, но делайте это внимателно.

• Bootstrap включает в себя предопределенные классы для создания быстрых, адаптивных макетов. Имея шесть контрольных точек, дюжину столбцов на каждом уровне сетки и десятки классов, можно создать своих индивидуальные макеты. При желании, это можно настроить через Sass.

Выравнивание

Используйте утилиты выравнивания flexbox для выравнивания столбцов по вертикали и горизонтали.

Вертикальное выравнивание

Одна из трёх колонок

Одна из трёх колонок

Одна из трёх колонок

Одна из трёх колонок

Одна из трёх колонок

Одна из трёх колонок

Одна из трёх колонок

Одна из трёх колонок

Одна из трёх колонок

<div>
  <div>
    <div>
      Одна из трёх колонок
    </div>
    <div>
      Одна из трёх колонок
    </div>
    <div>
      Одна из трёх колонок
    </div>
  </div>
  <div>
    <div>
      Одна из трёх колонок
    </div>
    <div>
      Одна из трёх колонок
    </div>
    <div>
      Одна из трёх колонок
    </div>
  </div>
  <div>
    <div>
      Одна из трёх колонок
    </div>
    <div>
      Одна из трёх колонок
    </div>
    <div>
      Одна из трёх колонок
    </div>
  </div>
</div>

Одна из трёх колонок

Одна из трёх колонок

Одна из трёх колонок

<div>
  <div>
    <div>
      Одна из трёх колонок
    </div>
    <div>
      Одна из трёх колонок
    </div>
    <div>
      Одна из трёх колонок
    </div>
  </div>
</div>

Горизонтальное выравнивание

Одна из двух колонок

Одна из двух колонок

Одна из двух колонок

Одна из двух колонок

Одна из двух колонок

Одна из двух колонок

Одна из двух колонок

Одна из двух колонок

Одна из двух колонок

Одна из двух колонок

Одна из двух колонок

Одна из двух колонок

<div>
  <div>
    <div>
      Одна из двух колонок
    </div>
    <div>
      Одна из двух колонок
    </div>
  </div>
  <div>
    <div>
      Одна из двух колонок
    </div>
    <div>
      Одна из двух колонок
    </div>
  </div>
  <div>
    <div>
      Одна из двух колонок
    </div>
    <div>
      Одна из двух колонок
    </div>
  </div>
  <div>
    <div>
      Одна из двух колонок
    </div>
    <div>
      Одна из двух колонок
    </div>
  </div>
  <div>
    <div>
      Одна из двух колонок
    </div>
    <div>
      Одна из двух колонок
    </div>
  </div>
  <div>
    <div>
      Одна из двух колонок
    </div>
    <div>
      Одна из двух колонок
    </div>
  </div>
</div>

Обертка колонки

Если больше 12-ти колонок разместить в одном ряду, то каждая группа дополнительных колонок, как одно целое, переносится на новую строку.

.col-9

.col-4
Поскольку 9 + 4 = 13 > 12, этот div шириной 4 колонки переносится на новую строку как один непрерывный блок.

.col-6
Последующие колонки продолжаются вдоль новой строки.

<div>
  <div>
    <div>.col-9</div>
    <div>.col-4<br>Поскольку 9 + 4 = 13 &gt; 12, этот div шириной 4 колонки переносится на новую строку как один непрерывный блок.</div>
    <div>.col-6<br>Последующие колонки продолжаются вдоль новой строки.</div>
  </div>
</div>

Разрывы колонок

Чтобы сместить колонки на новую строку в гибком контейнере, нужно сделать следующее: добавьте элемент с шириной width: 100% туда, где вы хотите обернуть ваши колонки новой строкой. Обычно это достигается с помощью нескольких .row, но не каждый исполнительный метод поддерживает это.

.col-6 .col-sm-3

.col-6 .col-sm-3

.col-6 .col-sm-3

.col-6 .col-sm-3

<div>
  <div>
    <div>.col-6 .col-sm-3</div>
    <div>.col-6 .col-sm-3</div>

    <!-- Force next columns to break to new line -->
    <div></div>

    <div>.col-6 .col-sm-3</div>
    <div>.col-6 .col-sm-3</div>
  </div>
</div>

Вы можете также применять это в брейкпойнтах с нашими отзывчивыми утилитами отображения элементов.

.col-6 .col-sm-4

.col-6 .col-sm-4

.col-6 .col-sm-4

.col-6 .col-sm-4

<div>
  <div>
    <div>.col-6 .col-sm-4</div>
    <div>.col-6 .col-sm-4</div>

    <!-- Force next columns to break to new line at md breakpoint and up -->
    <div></div>

    <div>.col-6 .col-sm-4</div>
    <div>.col-6 .col-sm-4</div>
  </div>
</div>

Упорядочивание

Класса порядка

Используйте классы .order- для управления визуальным порядком Вашего контента. Эти классы отзывчивы, поэтому Вы можете установить order по контрольной точке (например, .order-1.order-md-2). Включает поддержку от 1 до 5 на всех шести уровнях сетки.

DOM – это объектная модель документа, которую браузер создаёт в памяти компьютера на основании HTML-кода, полученного им от сервера. Если сказать по-простому, то HTML-код – это текст страницы, а DOM – это набор связанных объектов, созданных браузером при парсинге её текста.

Первый в DOM, но неупорядоченный

Второй в DOM, но последний

Третий в DOM, но первый

<div>
  <div>
    <div>
      Первый в DOM, но неупорядоченный
    </div>
    <div>
      Второй в DOM, но последний
    </div>
    <div>
      Третий в DOM, но первый
    </div>
  </div>
</div>

Также существуют отзывчивые классы .order-first и .order-last, которые изменяют порядок элемента, применяя order order: -1 и order: 6 соответственно. Эти классы также могут применяться с нумерованными классами .order-* по мере необходимости.

Первый в DOM, но неупорядоченный

Второй в DOM, но последний

Третий в DOM, но первый

<div>
  <div>
    <div>
      Первый в DOM, но неупорядоченный
    </div>
    <div>
      Второй в DOM, но последний
    </div>
    <div>
      Третий в DOM, но первый
    </div>
  </div>
</div>

Смещение колонок

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

Классы смещения

Двигайте колонки вправо, используя классы .offset-md-*. Они увеличивают левый отступ колонки на * колонок. Например, класс .offset-md-4 двигает .col-md-4 на 4 колонки.

.col-md-4

.col-md-4 .offset-md-4

.col-md-3 .offset-md-3

.col-md-3 .offset-md-3

<div>
  <div>
    <div>.col-md-4</div>
    <div>.col-md-4 .offset-md-4</div>
  </div>
  <div>
    <div>.col-md-3 .offset-md-3</div>
    <div>.col-md-3 .offset-md-3</div>
  </div>
  <div>
    <div>.col-md-6 .offset-md-3</div>
  </div>
</div>

В дополнение к «сбросу» колонок на брейкпойнтах, вам может понадобиться сброс офсетов. Смотрите пример с разметкой.

.col-sm-5 .col-md-6

.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0

.col-sm-6 .col-md-5 .col-lg-6

.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0

<div>
  <div>
    <div>.col-sm-5 .col-md-6</div>
    <div>.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
  </div>
  <div>
    <div>.col-sm-6 .col-md-5 .col-lg-6</div>
    <div>.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
  </div>
</div>

Утилиты полей

С переходом на flexbox вы можете использовать утилиты полей, такие как .mr-auto, чтобы отодвинуть одноуровневые столбцы друг от друга.

.col-md-4

.col-md-4 .ms-auto

.col-md-3 .ms-md-auto

.col-md-3 .ms-md-auto

.col-auto .me-auto

.col-auto

<div>
  <div>
    <div>.col-md-4</div>
    <div>.col-md-4 .ms-auto</div>
  </div>
  <div>
    <div>.col-md-3 .ms-md-auto</div>
    <div>.col-md-3 .ms-md-auto</div>
  </div>
  <div>
    <div>.col-auto .me-auto</div>
    <div>.col-auto</div>
  </div>
</div>

Автономные классы колонок

Классы .col-* также могут использоваться вне .row для придания элементу определенной ширины. Всякий раз, когда классы столбцов используются как непрямые дочерние элементы строки, отступы опускаются.

.col-3: ширина 25%

.col-sm-9: ширина 75% выше контрольной точки sm

<div>
  .col-3: ширина 25%
</div>
<div>
  .col-sm-9: ширина 75% выше контрольной точки sm
</div>

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

PlaceholderАдаптивное плавающее изображение

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

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

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

<div>
  <img src="..." alt="...">

  <p>
    Абзац текста-заполнителя. Мы используем его здесь, чтобы показать использование класса clearfix. Мы добавляем здесь довольно много бессмысленных фраз, чтобы продемонстрировать, как столбцы здесь взаимодействуют с плавающим изображением.
  </p>

  <p>
    Как видите, абзацы изящно обтекают плавающее изображение. А теперь представьте, как это будет выглядеть с фактическим содержанием здесь, а не просто с этим скучным текстом-заполнителем, который продолжается и продолжается, но на самом деле не передает никакой осязаемой информации. Он просто занимает место, и его не стоит читать.
  </p>

  <p>
    И тем не менее, здесь вы, по-прежнему настойчив в чтении этот текст-заполнитель, в надежде еще несколько прозрений, или некоторые скрытые пасхальные яйца содержания. Возможно, шутка. К сожалению, здесь ничего этого нет.
  </p>
</div>

Создание 5 колончатой сетки в Bootstrap 4

Автор Алексей На чтение 3 мин Просмотров 1.1к. Опубликовано 18.03.2018 Обновлено 25.02.2021

Сегодня мы расширим стандартную сетку Bootstrap 4 до 5 колонок и до верстаем блок из прошлого урока.

Расширяем bootstrap сетку до 5 колонок

По умолчанию в бутстрапе нет пяти колончатой сетки, но ее по сути не сложно сделать на основании к примеру 4 колончатой, просто берем все стили и переписываем под 5 колон, соответственно задав новый класс. Все css стили новой сетки можно забрать на githab: github.com/web-revenue/bootstrap4-5col/blob/master/.gitignore/5col.css (актуально для пользователей bootstrap версии ниже 4.4).

Начиная с версии bootstrap 4.4 и выше (в том числе 5+), появились встроенные классы которые позволяют выводить 5 колонок не расширяя сетки:

<div>
  <div>
    <div>Колонка 1</div>
    <div>Колонка 2</div>
    <div>Колонка 3</div>
    <div>Колонка 4</div>
    <div>Колонка 5</div>
  </div>
</div>

Если вам к примеру на разрешении экрана md нужно чтобы вместо 5 колонок выводить уже к примеру 3, тогда код будет таким.

<div>
 <div>
    <div>Колонка 1</div>
    <div>Колонка 2</div>
    <div>Колонка 3</div>
    <div>Колонка 4</div>
    <div>Колонка 5</div>
 </div> 
</div>

Смотрите подробнее документация по бутстрап сетке.

Ну а теперь можно до верстать наш блок до следующего вида:

для этого добавим следующую html разметку

<div>
    <div><p>20</p><p>СКЛАДОВ<br>ПО РОССИИ</p></div>
    <div><p>1300</p><p>ПОЗИЦИЙ<br>В КАТАЛОГЕ</p></div>
    <div><p>100%</p><p><span>ГАРАНТИЯ СОБЛЮДЕНИЯ СРОКОВ</span></p></div>
    <div><p>10</p><p>ЛЕТ ОПЫТ<br>РАБОТЫ</p></div>
    <div><p>0,1%</p><p>ОБРАЩЕНИЙ<br>ПО БРАКУ</p></div>  
</div>

Примечание: Добавляем после блока с классом well.

Ну и прописываем стили для элементов:

p.t-zag{
font-size:50px !important;/*размер шрифта*/
margin-bottom:1px;/*отступ для элементов от нижнего края*/
padding-top: 20px;/*отступ от верхнего края*/
}
.FEB238{color:#e65950;/*задаем цвет*/}

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

В следующем уроке мы продолжим верстать наш шаблон

Как сделать в Bootstrap 5 колонок

Если вам понравилась статья, вы можете отблагодарить автора любой суммой, какую сочтете для себя приемлемой:

Модальное окно Bootstrap: использование и настройка

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

WordPress создание темы с нуля

Давно хотел написать подробное руководство о том, как создать тему на WordPress с нуля. Вам это пригодится: если вы хотите научиться разрабатывать сайты на WP, а не просто устанавливать шаблонные решения; вы хотите сделать уникальный дизайн для своего сайта или Читать далее

Простая пагинация на PHP и MySQL

Это руководство о том, как сделать простое разбиение на страницы, используя PHP и MySQL с плагином jQuery Simple Pagination.Simplepagination.js — это простой плагин для jQuery, поддерживающий CSS3 и Bootstrap. Шаг 1: Включаем все js и css файлы Плагин jQuery Simple Pagination скачиваем отсюда. <link rel=»stylesheet» Читать далее

Календарь в input для ввода даты

Чтобы при вводе даты в input выпадал удобный календарик можно воспользоваться двумя способами: стандартным полем HTML5 type=»date» или JavaScript библиотекой Bootstrap Datepicker. Рассмотрим подробнее эти способы в этой статье. Календарь для input HTML5 Просто применяем у input атрибут type=»date» или Читать далее

CSS transition

CSS transition — это свойство, с помощью которого можно сделать плавные эффекты перехода элемента из одного состояния в другое. Ну например плавное изменение цвета блока при наведении. Выглядит это современно, а применяется очень просто и не надо использовать JavaScript. В Читать далее

Использование функции CSS calc()

С появлением функции calc() стало возможным делать математические расчёты, такие как сложение, вычитание, умножение, деление прямо в CSS. Рассмотрим некоторые примеры её использования, которые могут пригодиться. Выравнивание по центру Наверное самый распространённый случай использования. Чтобы отцентрировать элемент, необходимо отступить 50% Читать далее

Как устроена сетка Bootstrap

Вы здесь:
Главная — CSS — CSS Основы — Как устроена сетка Bootstrap

Сетка Bootstrap состоит из 12 колонок, так как число 12 делится на большое количество чисел без остатка. Деление на числа 2, 3, 4, 6, 12, позволяет получить много вариантов равных частей. Для верстки любого макета, 12 колонок вполне достаточно. Основу сетки Bootstrap составляют 3 обязательных класса, по аналогии с табличными тегами.


.container --> <table>    // контейнер

.row --> <tr>    // ряд

.col-x-x --> <td>    // колонка, где x будет с разными значениями


Классический пример сетки с двумя колонками.


<div>

    <div>

        <div>

            Первая колонка

        </div>

        <div>

            Вторая колонка

    </div>

</div>


Контейнеры в Bootstrap 4

Сетка должна быть обернута в класс .container или .fluid-container. В чем разница? Класс .container задает фиксированную ширину. Это значит, что при увеличении размеров экрана, блоки не будут растягиваться на всю ширину страницы.

Класс .fluid-container будет тянуть блоки на всю ширину страницы, как резина.

Ряды в Bootstrap 4

Внутри одного контейнера можно создавать сколько угодно рядов.


<div>

<div>

    <div>

        Шапка

    </div>

<div>

    <div>

        Контент

    </div>

<div>

        Колонка справа

    </div>

<div>

    <div>

        Подвал

    </div>

</div>


Колонки в Bootstrap 4

Название колонки всегда начинается с col, комбинация символов после дефиса – это сокращенное название ширины экрана у девайсов.


.col-          // extra small (<576px) для мобильных

.col-sm       // small

.col-md      // medium

.col-lg     // large

.col-xl    // extra large (>1200px) для больших десктопов


После размера ширины экрана, указывается количество колонок. Сколько колонок будут занимать блоки на страницах.


.col-sm-6     // на маленьких экранах блок займет 6 колонок

.col-lg-3     // на большом экране тот же блок займет 3 колонки


В HTML разметке мы прописываем блоку, сколько ему колонок занимать на маленьком и большом экране.


<div></div>
</code>


Ширина колонок

Пример ниже демонстрирует, как зависит ширина колонки от размеров экрана. Сколько конкретно пикселей приходится на одну колонку от самых маленьких до самых больших экранов, высчитывается браузером автоматически. Поскольку в CSS правилах фреймворка, ширина колонок указана в %. Иначе говоря, такой показатель, как ширина колонок, нас вообще не должен беспокоить.

Как получить 5 колонок одинаковой ширины?

Для этого есть специальный класс .col.


<div>

     <div>

        <div>Column 1</div>

        <div>Column 2</div>

        <div>Column 3</div>

        <div>Column 4</div>

        <div>Column 5</div>

    </div>

</div>


Высота колонок

А как насчет высоты, вертикального выравнивания? И здесь так же можно не волноваться. В сетке Bootstrap 4 все колонки имеют одинаковую высоту, независимо от количества контента.

Отступы у колонок

У Bootstrap есть классы для добавления отступов колонок, которые начинаются со слова offset, затем указывается величина экрана и количество колонок. Сдвинуть элемент вправо на 3 колонки.


<div>

    <div></div>

</div>


Вложенные колонки

В колонку можно вкладывать новую сетку, где также доступны все 12 колонок. Класс .container во вложенной сетке прописывать уже не нужно, сразу создаем ряд.


<div>

    <div>

        <div>

             Вложенный блок 1

        </div>

        <div>

            Вложенный блок 2

        </div>

    </div>


Горизонтальное выравнивание колонок

Для горизонтального выравнивание относительно главной оси, в Bootstrap есть классы:


justify-content-center //     по центру

justify-content-start //     в начале главной оси

justify-content-end //     в конце главной оси


Заключение

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

• 
  Создано 02.09.2019 10:41:51

• 
  
  Михаил Русаков

Предыдущая статья Следующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

1. 
   Кнопка:
   
   <a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>

   Она выглядит вот так:

2. 
   Текстовая ссылка:
   <a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>

   Она выглядит вот так: Как создать свой сайт

3. BB-код ссылки для форумов (например, можете поставить её в подписи):
   
   [URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]

Загрузочный 5 колонок с границы

Мне было интересно, как лучше всего было бы создать макет из 5 столбцов в Bootstrap и дать этим дивам границу и интервал.

Я создал новый класс, чтобы сделать сетку подходящей для 5 столбцов, например:

.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15 {
    position: relative;
    min-height: 1px;
}
.col-xs-15 {
    width: 20%;
    float: left;
}

@media (min-width: 768px) {
.col-sm-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 992px) {
    .col-md-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 1200px) {
    .col-lg-15 {
        width: 20%;
        float: left;
    }
}

<div>
  <div>
   .....
  </div>
</div>

То, что я пытаюсь сделать, — это дать каждому столбцу 10px маржу справа (за исключением последнего столбца вне курса). Далее я хочу дать каждому столбцу или item-wrap границу 1px.

Что бы я ни пытался, я всегда заканчиваю без разницы.

.item {
  border: 1px solid #efefef;
  padding:10px;
}
.item.last {
  margin-right: 0;
}

Смотрите мои fiddle

html

css

twitter-bootstrap

Поделиться

Источник

Meules    

23 декабря 2015 в 17:00

4 ответа

• twitter загрузочный границы название

  Просто хотел знать, как дать название границы с помощью bootstrap? Как в приведенном ниже примере. <div id=form style=width:350px;> <fieldset> <legend style=color:blue;font-weight:bold;>General Information</legend> <table> <tr> <td><span…

• 5 колонок — 3 колонки фиксированной ширины и 2 жидкости

  Я хочу создать жидкий макет с 3 столбцами фиксированной ширины & 2 fluid. Всего 5 колонок. У меня была игра с ‘display: table-cell;’, которая работала в Chrome, но сломалась в FF. section.how-to .steps { max-width:1400px; width:100%; padding:10px 3%; box-sizing: border-box; height:350px}…

2

В настоящее время макеты столбцов 5, 7 и 9 не поддерживаются в собственной начальной загрузке, так как структура столбцов 12 по умолчанию не делится равномерно на эти числа. Чтобы получить макет из 5 столбцов, вам нужно будет посетить сеточную систему http://getbootstrap.com/customize/# и изменить значение @grid-columns до 15 (или действительно все, что равномерно делится на 5).

После настройки и загрузки вашей личной версии Bootstrap вы можете реализовать макет из 5 столбцов с помощью:

<div>Column 1</div>
<div>Column 2</div>
<div>Column 3</div>
<div>Column 4</div>
<div>Column 5</div>

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

Поделиться

Tim Lewis    

23 декабря 2015 в 17:30

0

Если вы хотите предоставить всем столбцам поле для интервала, вы можете использовать псевдоклассы для достижения этой цели:

.item:not(:last-child) {
    margin-right:10px;
}

В основном это даст всем элементам с классом .item правое поле, за исключением последнего элемента. Вот ваш обновленный fiddle.

Поделиться

Drew Kennedy    

23 декабря 2015 в 17:16

0

С выпуском bootstrap-4 мы увидели множество новых функций и изменений, которые он придумал. Одним из таких изменений было удаление поплавков и процентов, а также использование flex-box для макетов в bootstrap-4 .

Bootstrap-4 построен на верхней части гибкого макета .

Поэтому всякий раз ,когда у нас есть такое требование, когда наш макет не подходит к обычному 12-сеточному макету нашего bootstrap-4, мы можем использовать наш настроенный CSS (используя свойства flexbox) для создания любого адаптивного макета числового столбца(в вашем случае это 5-столбчатый макет), поскольку flexbox дает нам такую большую гибкость при этом. Используйте приведенный ниже код, который я написал для достижения этой цели.

HTML5:

<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <meta http-equiv="X-UA-Compatible" content="ie=edge" />
   <link rel="stylesheet" href="./style.css" />
   <title>5 column layout in flexbox</title>
</head>

<body>
 <main>
  <div>col1</div>
  <div>col1</div>
  <div>col3</div>
  <div>col4</div>
  <div>col5</div>
 </main>
</body>
</html>

CSS:

* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

body {
 padding-top: 1rem;
}

/* --- This much code will do it for you --- */
.flex-container {
  display: flex;
 }

.flex-item {
  min-height: 400px;
  border: 4px solid #03a503;
  margin: 0 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
}

.flex-item:first-of-type,
.flex-item:last-of-type {
  margin-right: 1rem;
}

 /* ----- Basic break-point ----- */
@media screen and (max-width: 768px) {
 .flex-container {
   flex-direction: column;
 }

.flex-item {
  min-height: 100px;
  margin: 0.5rem;
}
.flex-item:first-of-type,
.flex-item:last-of-type {
   margin: 0.5rem;
 }
}

Вот полный код https://jsfiddle.net/cLmq0otv/3/

Надеюсь, этот код решит проблему.

Поделиться

Imran Rafiq Rather    

04 апреля 2020 в 21:54

• Загрузочный стол без полосы / границы

  Я как бы застрял с проблемой CSS при использовании Bootstrap. Я также использую Angular JS с Angular UI.bootstrap (что может быть частью проблемы). Я делаю веб-сайт, который отображает данные в виде таблицы. Иногда данные содержат объект, который я должен отобразить в таблицах. Поэтому я хочу…

• Загрузочный стол-граничит удалить правой, левой границы

  Я использую такой стол: <table class=table table-hover table-bordered> Эта таблица создает ячейки, которые имеют границы со всех четырех сторон. Я хочу удалить левую и правую границы, но сохранить верхнюю и нижнюю. Я пытался: .table thead>tr>th,.table tbody>tr>th,.table…

0

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

.col{
padding:1rem;
}
.col div{
  border:1px solid red;
  min-height:5rem;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>

<div>
  <div>
    <div>
      <div>content column 1</div>
    </div>
    <div>
      <div>content column 2</div>
    </div>
    <div>
      <div>content column 3</div>
    </div>
    <div>
      <div>content column 4</div>
    </div>
    <div>
      <div>content column 5</div>
    </div>
  </div>
</div>

Поделиться

PoseLab    

04 апреля 2020 в 23:22

Похожие вопросы:

Загрузочный Границы Ползунок «Радиус»

Спокойной ночи, друзья! Вот я опять, извините. В этом блоге я сделал ( http://bloganacastro.com/ ) слайдер bootstrap работает правильно. Только когда мы нажимаем на следующий слайдер, img теряет…

Прихлоп — 5 колонок

Я пытаюсь получить макет полной ширины 5 столбцов, но не могу найти решение, которое соответствует моим потребностям Вот код, который я использую <!— Content Section —> <div…

Загрузочный стол изображения в качестве границы

Я использую Bootstrap class table и хочу заменить границы по умолчанию изображением. С помощью селекторов Bootstrap я могу скрыть границы по умолчанию и показать новые границы ( live preview )….

twitter загрузочный границы название

Просто хотел знать, как дать название границы с помощью bootstrap? Как в приведенном ниже примере. <div id=form style=width:350px;> <fieldset> <legend…

5 колонок — 3 колонки фиксированной ширины и 2 жидкости

Я хочу создать жидкий макет с 3 столбцами фиксированной ширины & 2 fluid. Всего 5 колонок. У меня была игра с ‘display: table-cell;’, которая работала в Chrome, но сломалась в FF. section.how-to…

Загрузочный стол без полосы / границы

Я как бы застрял с проблемой CSS при использовании Bootstrap. Я также использую Angular JS с Angular UI.bootstrap (что может быть частью проблемы). Я делаю веб-сайт, который отображает данные в виде…

Загрузочный стол-граничит удалить правой, левой границы

Я использую такой стол: <table class=table table-hover table-bordered> Эта таблица создает ячейки, которые имеют границы со всех четырех сторон. Я хочу удалить левую и правую границы, но…

Загрузочный перекрытии границы с колоннами с margin и padding

У меня есть эта досадная проблема с границами дивов. Как я могу избежать того, чтобы границы перекрывали друг друга? Это мой кодовый код, где вы можете увидеть проблему:…

5 колонок, 2 колоны-это margin-top: height

У меня есть 5 колонок в контейнере, и я хочу 2 маржи-сверху: 50p; а остальные 3 все еще остаются сверху. Вместо того, чтобы следовать за остальными. .container { width: 960px; margin: 0 auto;…

добавляя последовательно в 1px границы загрузочный седла

Есть ли чистый, css-единственный способ добавить последовательную границу 1px вокруг cols, где, когда два находятся рядом, у вас нет границы 2px? Обратите внимание, что внешние края имеют границу…

Как вывести 5 колонок

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

CSS классы

.row-cols-5 > * {
  flex: 0 0 auto;
  width: 20%;
}
.row-cols-sm-5 > * {
  flex: 0 0 auto;
  width: 20%;
}
.row-cols-md-5 > * {
  flex: 0 0 auto;
  width: 20%;
}
.row-cols-lg-5 > * {
  flex: 0 0 auto;
  width: 20%;
}
.row-cols-xl-5 > * {
  flex: 0 0 auto;
  width: 20%;
}

Напомню немного классы сетки, для каких размеров экранов:

• xl — min-width: 1200px
• lg — min-width: 992px
• md — min-width: 768px
• sm — min-width: 576px

HTML разметка

А теперь пример самой простой реализации.

Столбец 1

Столбец 2

Столбец 3

Столбец 4

Столбец 5

<div>
  <div>
    <div>
      Столбец 1
    </div>
    <div>
      Столбец 2
    </div>
    <div>
      Столбец 3
    </div>
    <div>
      Столбец 4
    </div>
    <div>
      Столбец 5
    </div>
  </div>
</div> 

Более сложная реализация 5 колонок

Задача: Нужно на экранах более 992px (lg) вывести 5 колонок, на расширении экрана от 768 до 992px чтобы это складывалось в 3 колонки, а на экранах менее 768px складывалось в 2. 

Решение — сама разметка.

<div>
    <div>
        содержимое
    </div>
    <div>
        содержимое
    </div>
    <div>
        содержимое
    </div>
    <div>
        содержимое
    </div>
    <div>
        содержимое
    </div>
</div>

Вот так легко и просто сделать пяти колончатый макет. Если у вас что то не получается спрашивайте.

Bootstrap сетка за 15 минут

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

Любой человек который знает, хотя бы в общих чертах, HTML и CSS может начать использовать данный фреймворк уже сейчас.

В данной статье рассмотрим такое базовое понятие как, bootstrap сетка — она является фундаментом данного фреймворка.

1. Rows и Columns

Часть заголовка я специально оставил на английском языке, чтобы возникало меньше путаницы (rows — ряды, columns — колонки)

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

Rows (ряды) — это один уровень блоков. Это означает, что когда мы создаем новый ряд (row) он занимает всю ширину элемента внутри которого он находится.

Горизонтальное выравнивание осуществляется с помощью колонок (Columns). Дочерними элементами ряда может являться только колонка. Размещение контента в row без колонки — может привести к нарушению макета

<!-- Не правильно-->
<div>
    Ваш контент
</div>

<!-- Правильно-->
<div>
    <div>Правильно размещенный контент</div>
</div>

Замечание: Колонки и ряды имеют особые отношения. Каждая колонока имеют отступ — padding — в 15px слева и справа, таким образом контент внутри имеет равные отступы по краям. Такие правила «отодвигают» колонки от ряда на 15px , а это может нарушить макет, чтобы этого не происходило для row заданы отрицательные отступы что позволяет размещать крайние элементы без отступов от родителя, и именно поэтому колонку всегда следует оборачивать в row.

2. Row разделены 12

Ряд поделен на 12 равных частей. Когда мы собираемся разместить внутри ряда колонку — нам необходимо указать ее ширину — ширину которую займет колонка. Это делается путем добавления в блоку div класса col-md-номер , где номер может быть целым числом от 1 до 12. В зависимости от данного числа, столбец будет занимать определенный процент от полной щирины строки. Например: 6 это 50% от ширину ряда так как 6/12 = 0,5, 3 — 25% (3/12) и т.д.

<div>
    <div>Вся ширина ряда</div>
</div>

<div>
    <div>25%</div>
    <div>25%</div>
    <div>50%</div>
</div>

3. Обертывание колонок

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

В примере первые 2 колонки  имеют ширину 8 и 4 соотвественно, что в сумме дает 12. Таким образом первая строка становится заполненной и следующий за ними элемент будет перенесен на следующую строку.

<div>
    <div></div>
    <div></div>
    <div>Эта колонка шириной 9 будет перенесена на следующую строчку</div>
</div>

 4. Классы для размеров экрана

 Помните мы писали .col-md-номер во втором  шаге? Этот -md- означает средние размеры экрана (от слова medium — средние). В bootstrap заложены стандартные классы для использования на разных размерах экрана:

xs — (Extra small) — Экстра маленькие экраны, такие как у смартфонов, Используйте их так: .col-xs-номер

sm — (Small Screens) — Маленькие экраны, такие как у планшетов. Использование: .col-sm-номер

md — (Medium) — Средние размеры экранов, это экраны с низким количеством точек на дюйм и ноутбуки. Использование такое же как и в предыдущих примерах: .col-md-номер

lg — (Large) — Большие экраны с высоким разрешением. .col-lg-номер 

Bootstrap высчитывает разрешение экрана и dpi (количество точек на дюйм или плотность пикселей) и в соответствии с этим вычислением указывает какой класс активен в данный момент. Это полноценный способ контролировать как положение, так и отображение контента в целом для любых устройств.

<div>
    <div><p>Данный блок на среднем экране займет половину, на очень маленьком - всю ширину</p></div>
    <div><p>Данный блок на среднем экране займет половину, на очень маленьком - всю ширину</p></div>
</div>

5. Clearfix

В некоторых случаях бывает так что две колонки планируются разной высоты, и заставить отображаться следующий элемент, который должен быть под ними бывает проблематично. Что бы это предотвратить существует класс clearfix. Он помещает  все следующие колонки на новую строку.

<div>
    <div>Эта колонка выше чем все остальныне</div>
    <div></div>
    <div></div>
    <div></div>
</div>

6. Offsets (Смещения) — ваши друзья

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

Чтобы создать отступы слева и/или справа. Применение к любому блоку с колонкой класса .col-md-offset-2 сместит данный блок вправо на размер двух пустых колонок . Это же правило действует и ля других размеров экрана т.е. col-xs-2, col-sm-2 и прочие .

7. Классы Push и Pull

Классы .push и .pull позволяют нам переназначить привязку блоков в зависимости от экрана устройства. Класс .push двигает колонку к правому краю, а класс .pull — к левому. Отличие данного класса от offset в том что они имеют position:relative, таким образовам не сдвигая остальные блоки.

Классы push и pull имеют следущий синткасис: .col-размер-push(pull)-число. Размеры такие же как и в 4 пункте — xs, sm, md, lg. Номер это количество колонок, которые мы хотим подвинуть.

<div>
    <div>На ноутбуках этот текст будет отображаться справа от картинки, на XS экранах картинка будет справа а текст слева</div>
    <div><img src="city.jpg"></div>
</div>

Заключение

 Вот и все основы, которые необходимо знать, чтобы начать использовать bootstrap сетку в своих проектах. На основе этих семи пунктов вы с легкостью можете сделать разметку для любого мобильного устройства без использования media запросов.

Но помимо данных правил существует еще ряд других, более расширенных,которые также часто используются.. Для их изучение посмотрите на русскоязычный портал о bootstrap http://bootstrap-3.ru/

столбцов · Bootstrap v5.0

Внимание! Обязательно прочтите страницу «Сетка», прежде чем погрузиться в то, как изменять и настраивать столбцы сетки.

Как они работают

• Столбцы построены на архитектуре flexbox сетки. Flexbox означает, что у нас есть возможности для изменения отдельных столбцов и модификации групп столбцов на уровне строк. Вы выбираете, как столбцы увеличиваются, сжимаются или иным образом изменяются.

• При построении макетов сетки все содержимое размещается в столбцах. Иерархия сетки Bootstrap идет от контейнера к строке, столбцу и содержимому. В редких случаях вы можете объединить содержимое и столбец, но имейте в виду, что это может иметь непредвиденные последствия.

• Bootstrap включает предопределенные классы для создания быстрых, отзывчивых макетов. С шестью контрольными точками и дюжиной столбцов на каждом уровне сетки у нас есть десятки классов, уже созданных для вас, чтобы создавать желаемые макеты. При желании это можно отключить через Sass.

Выравнивание

Используйте утилиты выравнивания flexbox для вертикального и горизонтального выравнивания столбцов.

Вертикальное выравнивание

Один из трех столбцов

Один из трех столбцов

Один из трех столбцов

Один из трех столбцов

Один из трех столбцов

Один из трех столбцов

Один из трех столбцов

Один из трех столбцов

Один из трех столбцов

  

  

    

      Один из трех столбцов
    
    

      Один из трех столбцов
    
    

      Один из трех столбцов
    
  
  

    

      Один из трех столбцов
    
    

      Один из трех столбцов
    
    

      Один из трех столбцов
    
  
  

    

      Один из трех столбцов
    
    

      Один из трех столбцов
    
    

      Один из трех столбцов
    
  
  

Один из трех столбцов

Один из трех столбцов

Один из трех столбцов

  

  

    

      Один из трех столбцов
    
    

      Один из трех столбцов
    
    

      Один из трех столбцов
    
  
  

Горизонтальное выравнивание

Один из двух столбцов

Один из двух столбцов

Один из двух столбцов

Один из двух столбцов

Один из двух столбцов

Один из двух столбцов

Один из двух столбцов

Один из двух столбцов

Один из двух столбцов

Один из двух столбцов

Один из двух столбцов

Один из двух столбцов

  

  

    

      Один из двух столбцов
    
    

      Один из двух столбцов
    
  
  

    

      Один из двух столбцов
    
    

      Один из двух столбцов
    
  
  

    

      Один из двух столбцов
    
    

      Один из двух столбцов
    
  
  

    

      Один из двух столбцов
    
    

      Один из двух столбцов
    
  
  

    

      Один из двух столбцов
    
    

      Один из двух столбцов
    
  
  

    

      Один из двух столбцов
    
    

      Один из двух столбцов
    
  
  

Обмотка колонн

Если в одной строке помещается более 12 столбцов, каждая группа дополнительных столбцов будет как одно целое переноситься на новую строку.

.col-9

.col-4
Поскольку 9 + 4 = 13> 12, этот div шириной 4 столбца переносится на новую строку как один непрерывный блок.

.col-6
Последующие столбцы продолжаются до новой строки.

  

  

    
 .col-9 
    
 .col-4 
 Поскольку 9 + 4 = 13 & gt; 12, этот div шириной в 4 столбца переносится на новую строку как один непрерывный блок. 
    
 .col-6 
 Последующие столбцы продолжаются до новой строки.
  
  

Обрыв столбца

Разбиение столбцов на новую строку в flexbox требует небольшого взлома: добавьте элемент с шириной : 100% везде, где вы хотите перенести столбцы на новую строку. Обычно это достигается с помощью нескольких .row s, но не каждый метод реализации может это учитывать.

.col-6 .col-sm-3

.col-6 .col-sm-3

.col-6 .col-sm-3

.col-6 .col-sm-3

  

  

    
 .col-6 .col-sm-3 
    
 .col-6 .col-sm-3 

    
    
 

    
 .col-6 .col-sm-3 
    
 .col-6 .col-sm-3 
  
  

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

.col-6.col-sm-4

.col-6 .col-sm-4

.col-6 .col-sm-4

.col-6 .col-sm-4

  

  

    
 .col-6 .col-sm-4 
    
 .col-6 .col-sm-4 

    
    
 

    
 .col-6 .col-sm-4 
    
 .col-6 .col-sm-4 
  
  

Повторный заказ

Классы заказа

Используйте .order- классы для управления визуальным порядком вашего контента. Эти классы являются адаптивными, поэтому вы можете установить порядок по точке останова (например, .order-1.order-md-2 ). Включает поддержку от 1 до 5 на всех шести уровнях сети.

Сначала в DOM, порядок не применяется

Второй в DOM, с большим порядком

Третий в DOM, с порядком 1

  

  

    

      Сначала в DOM, порядок не применяется
    
    

      Второй в DOM, с большим порядком
    
    

      Третий в DOM, с порядком 1
    
  
  

Есть еще и отзывчивые .order-first и .order-last классы, которые изменяют order элемента, применяя order: -1 и order: 6 , соответственно. Эти классы также можно при необходимости смешивать с пронумерованными классами .order- * .

Сначала в DOM, заказывается последним

Второй в DOM, неупорядоченный

Третий в DOM, заказывается первым

  

  

    

      Сначала в DOM, заказывается последним
    
    

      Второй в DOM, неупорядоченный
    
    

      Третий в DOM, заказывается первым
    
  
  

Колонны компенсационные

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

Классы смещения

Переместите столбцы вправо, используя классы .offset-md- * . Эти классы увеличивают левое поле столбца на * столбца. Например, .offset-md-4 перемещает .col-md-4 по четырем столбцам.

.col-md-4

.col-md-4 .offset-md-4

.col-md-3 .offset-md-3

.col-md-3 .offset-md-3

  

  

    
 .col-md-4 
    
 .col-md-4 .offset-md-4 
  
  

    
 .col-md-3 .offset-md-3 
    
 .col-md-3 .offset-md-3 
  
  

    
 .col-md-6 .offset-md-3 
  
  

В дополнение к очистке столбца в ответных точках останова вам может потребоваться сбросить смещения.Посмотрите это в действии на примере сетки.

.col-sm-5 .col-md-6

.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0

.col-sm-6 .col-md-5 .col-lg-6

.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0

  

  

    
 .col-sm-5 .col-md-6 
    
 .col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0 
  
  

    
 .col-sm-6.col-md-5 .col-lg-6 
    
 .col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0 
  
  

Маржа ЖКХ

С переходом на flexbox в v4 вы можете использовать утилиты полей, такие как .me-auto , чтобы отодвинуть одноуровневые столбцы друг от друга.

.col-md-4

.col-md-4 .ms-auto

.col-md-3 .ms-md-auto

.col-md-3 .ms-md-auto

.col-auto .me-auto

.col-auto

  

  

    
 .col-md-4 
    
 .col-md-4 .ms-auto 
  
  

    
 .col-md-3 .ms-md-auto 
    
 .col-md-3 .ms-md-auto 
  
  

    
 .col-auto .me-auto 
    
 .col-auto 
  
  

Классы автономных столбцов

Модель .col- * классы могут также использоваться вне .row , чтобы задать элементу определенную ширину. Когда классы столбцов используются как непрямые дочерние элементы строки, отступы опускаются.

.col-3: ширина 25%

.col-sm-9: ширина на 75% выше точки останова sm

  

  .col-3: ширина 25%


  .col-sm-9: ширина на 75% выше точки останова sm
  

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

Заполнитель Адаптивное плавающее изображение

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

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

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

  

  

  

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

  

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

  

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

html — Как разделить строку начальной загрузки на 5 равных частей?

html — Как разделить строку начальной загрузки на 5 равных частей? — Переполнение стека

Присоединяйтесь к Stack Overflow , чтобы учиться, делиться знаниями и строить свою карьеру.

Спросил
6 лет, 4 месяца назад

Просмотрено
60k раз

Я хочу разделить строку начальной загрузки на 5 равных частей .Он включает в себя 12-col-md , так как я могу разделить его на 5 равных частей?

Может ли кто-нибудь помочь мне решить эту проблему?

алексе

10k106106 золотых знаков955955 серебряных знаков10951095 бронзовых знаков

Создан 17 мар.

ануруддхика ануруддхика

1,9559 золотых знаков2626 серебряных знаков3939 бронзовых знаков

1

Отличный способ решить эту проблему здесь!

По умолчанию Bootstrap не предоставляет систему сеток, которая позволяет нам
создать макет из пяти столбцов, но, как видите, это довольно просто.В
сначала вам нужно создать определение столбца по умолчанию таким образом, чтобы
Bootstrap сделает это. Я назвал свои классы col -..- 15.

  .col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15 {
    положение: относительное;
    минимальная высота: 1px;
    отступ справа: 10 пикселей;
    отступ слева: 10 пикселей;
}
  

Далее вам нужно определить ширину новых классов в случае разных
медиа-запросы.

  .col-xs-15 {
    ширина: 20%;
    плыть налево;
}
@media (min-width: 768 пикселей) {
.col-sm-15 {
        ширина: 20%;
        плыть налево;
    }
}
@media (min-width: 992px) {
    .col-md-15 {
        ширина: 20%;
        плыть налево;
    }
}
@media (min-width: 1200 пикселей) {
    .col-lg-15 {
        ширина: 20%;
        плыть налево;
    }
}
  

Теперь вы готовы объединить свои классы с оригинальным Bootstrap.
классы. Например, если вы хотите создать элемент div, который
вести себя как макет из пяти столбцов на средних экранах и как четыре
столбцы на более мелкие, вам просто нужно использовать что-то вроде этого:

  

    

    ...
    

  

Квентин

813k107107 золотых знаков10

3 серебряных знака121

бронзовых знаков

Создан 22 фев.

Фернандо МадриагаФернандо Мадриага

38811 золотой знак33 серебряных знака1515 бронзовых знаков

1

Старая версия начальной загрузки

Используйте пять div с классом span2 и присвойте первому класс offset1.

Пять равноотстоящих и выровненных по центру столбцов.

В бутстрапе 3.0 и 4 альфа.

ПОЛЬЗОВАТЕЛЬСКИЙ СТИЛЬ

Пользовательские стили

 .контейнер {ширина: 100%; плыть налево;}
.col1 {ширина: 20%; плыть налево}
  

Последний стиль таблицы

  .container {width: 100%; display: table;}
.col1 {ширина: 20%; display: table-cell;}
  

Создан 03 сен.

Рави Деликсан

2,74711 золотых знаков1919 серебряных знаков2929 бронзовых знаков

1

Вы можете использовать что-то вроде

первый контейнер будет иметь смещение, поэтому у вас будет одинаковое поле (col-sm-1) с левой и правой стороны с 5 одинаковыми контейнерами внутри.

Создан 17 марта 2015 г. в 11: 282015-03-17 11:28

iuriiiurii

3,73622 золотых знака2020 серебряных знаков2626 бронзовых знаков

1

это довольно просто, если вы используете bootstrap 4, не уверен, что он также работает в bootstrap 3

  

 Bootstrap 4, пять столбцов 
 На всю ширину (в пределах.контейнер-жидкость) 

    

        
    
    


    
    


    
    


    
    


    
    


    


  

Создан 21 авг.

Сайед Шибли

76211 золотой знак99 серебряных знаков1414 бронзовых знаков

  

         

             

                 
 1 
                 
 2 
                 
 3 
             
         
         

                

                        
 4 
                        
 5 
                    
         
     
  

Создан 22 мая ’19 в 22: 452019-05-22 22:45

1

Для решения этой проблемы можно использовать свойство col по умолчанию bootstrap-4.

Это автоматически разделит заданное пространство на 5 равных частей.

Примечание. Это может создать проблемы, если вы хотите отобразить 3 столбца на любом другом экране. Допустим, если вы хотите отображать 5 столбцов подряд на средних экранах, вы можете добавить класс «col-md» для каждого элемента. Но если вам нужно 3 столбца подряд на sm-экранах, вы столкнетесь с проблемами.

Создан 13 ноя.

Зохайб

2344 бронзовых знака

Вы можете использовать span2 , чтобы использовать максимальный объем пространства.Найдите код:

  

    
 1 
    
 2 
    
 3 
    
 4 
    
 5 

  

Абоб

50744 серебряных знака2525 бронзовых знаков

Создан 17 мар.

0

Используйте это свойство css в вашем custromScript.css для использования в большом устройстве

 
    .col-lg-2-0 {
      положение: относительное;
      ширина: 100%;
      отступ справа: 15 пикселей;
      отступ слева: 15 пикселей;
      -ms-flex: 0 0 20%;
      гибкость: 0 0 20%;
      максимальная ширина: 20%;
    }

  

и используйте класс col-lg-2-0 вместо col-lg-2 , который разделит четыре столбца

AS Mackay

2,1559 золотых знаков1515 серебряных знаков2323 бронзовых знака

Создан 05 мар.

0

Вы можете настроить CSS начальной загрузки.Вам необходимо импортировать файлы scss в свой собственный файл custom.scss. Затем вам нужно использовать компиляцию custom.scss в css в другом файле. Например: custom.css. Ознакомьтесь с этой ссылкой для получения более подробной информации.
Шаблон начальной загрузки

В файле custom.scss

  $ сетка-столбцов: 15;
@import "node_modules / bootstrap / scss / bootstrap";
  

Затем вы можете использовать col- {breakpoint} -3 в своем проекте, чтобы иметь 5 столбцов одинаковой ширины.

ОСТОРОЖНО

Это будет глобальным.Вы также должны изменить другие файлы, если вы использовали по умолчанию 12-точечную сетку в другом месте вашего проекта.

Создан 27 сен.

Вы можете использовать класс row-cols- * (например: row-cols-3 , row-cols-md-3 ) в соответствии с вашими требованиями.

  

  

    
 Столбец 
    
 Столбец 
    
 Столбец 
    
 Столбец 
  

  

для получения более подробной информации Посетите официальный сайт начальной загрузки

ответ дан 2 апр в 06:09

Я бы посоветовал использовать таблицу вместо начальной загрузки, чтобы разделить ее на 5 частей, и внутри каждого столбца снова можно использовать сетку начальной загрузки.

Этот ответ может помочь вам в этом

Но если у вас есть другие проблемы, которые вы не можете решить описанным выше способом, прокомментируйте их ниже.

Создан 30 мая.

lang-html

Stack Overflow лучше всего работает с включенным JavaScript

Ваша конфиденциальность

Нажимая «Принять все файлы cookie», вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в ​​отношении файлов cookie.

Принимать все файлы cookie

Настроить параметры

Как создать в Bootstrap пять равных столбцов?

Создание любого количества равных столбцов в строке никогда не было так проще, как теперь в Bootstrap 4.0+. С введением подхода «flexbox» к системе сеток дизайнерам не нужно беспокоиться о добавлении дополнительных CSS, чтобы заставить его работать. Вот как это делается.

Подход:
• Перейдите на сайт Bootstrap и загрузите последние файлы Bootstrap на свой компьютер.
• Напишите базовый шаблон HTML, используя эти файлы.
• После того, как все настроено, создайте простой «контейнер» div внутри тега.
• Внутри «контейнера» создайте еще один div с классом «row» , и, как следует из названия, мы создаем строку для обработки столбцов.Заполните блок ‘row’ div 5 div с классом ‘col’ . Поскольку сеточная система Bootstrap 4.0+ теперь перешла на Flexbox, столбцы будут организованы сами по себе в пять элементов DOM одинакового размера.

Пример:

00 Кому между столбцами к каждому из столбцов добавляется небольшой запас.

Выход:

Сеточная система начальной загрузки

Сеточная система начальной загрузки

Сетка

Bootstrap позволяет размещать до 12 столбцов на странице.

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

Сетка Bootstrap адаптивна, и столбцы будут переупорядочены
в зависимости от размера экрана: на большом экране может выглядеть лучше с
контент организован в три столбца, но на маленьком экране лучше, если
элементы содержимого были наложены друг на друга.

Совет: Помните, что столбцы сетки должны составлять в сумме до двенадцати для
строка. Более того, столбцы будут складываться независимо от области просмотра.

Классы сетки

Система сеток Bootstrap имеет четыре класса:

• xs (для телефонов - экраны шириной менее 768 пикселей)
• см (для планшетов - экраны шириной не менее 768 пикселей)
• md (для небольших ноутбуков - экраны шириной 992 пикселя или более)
• LG (для ноутбуков и настольных компьютеров - экраны шириной не менее 1200 пикселей)

Приведенные выше классы можно комбинировать для создания более динамичных и гибких макетов.

Совет: Каждый класс масштабируется, поэтому, если вы хотите установить одинаковую ширину для xs и sm, вам нужно только указать xs.

Правила сетевой системы

Некоторые правила сеточной системы Bootstrap:

• Строки должны быть размещены в контейнере .container (фиксированной ширины) или .container-fluid (во всю ширину) для надлежащего выравнивания и заполнения
• Используйте строки для создания горизонтальных групп столбцов
• Содержимое должно быть помещено в столбцы, и только столбцы могут быть непосредственными дочерними элементами строк
• Предопределенные классы, например .row и .col-sm-4 доступны для быстрого создания макетов сетки
• Столбцы создают промежутки (промежутки между содержимым столбца) посредством заполнения. Это заполнение смещено в строках для первого и последнего столбца через отрицательное поле на . Row
• Столбцы сетки создаются путем указания количества из 12 доступных столбцов, которые вы хотите охватить. Например, три равных столбца будут использовать три .col-sm-4
• Ширина столбцов указывается в процентах, поэтому они всегда гибкие и имеют размер относительно их родительского элемента.

Базовая структура сетки начальной загрузки

Ниже представлена ​​базовая структура сетки Bootstrap:

Итак, чтобы создать нужный макет, создайте контейнер (

   
      
   
   ....

 

 .container 
.контейнер-жидкость 
 .container-sm 
 .container-md 
 .container-lg 
 .container-xl 
 .container-xxl 
 

   

      

         Столбец 1
      
      

         Колонка 2
      
      

         Колонка 3
      
   

 

   

      

         Столбец 1
      
      

         Колонка 2
      
      

         Колонка 3
      
   

 

   

      
 Столбец 1 
      
 Столбец 2 
      
 Столбец 3 
   
   

      
 Столбец 3/12 
      
 Столбец 6/12 
      
 Столбец 3/12 
   

 

   

      
 Столбец 1 
      
 Столбец 2 
      
 Столбец 3 
   
   

      
 Столбец 3/12 
      
 Столбец 6/12 
      
 Столбец 3/12 
   

 

   

      
 Столбец 1 
      
 Столбец 2 
      
 Столбец 3 
      
 Столбец 4 
      
 Колонка 5 
      
 Столбец 6 
   

 

  

 .col-md-4 
 .col-md-4 .offset-md-4 
  
  

 .col-md-3 .offset-md-3 
 .col-md-3 .offset-md-3 
  

 

   

      
 .col-md-4 
      
 .col-md-4 .ms-auto 
   
   

      
 .col-md-3 .ms-md-auto 
      
 .col-md-3 .ms-md-auto 
   

 

   

      

         
 Горизонтальный желоб 
      
      

         
 Горизонтальный желоб 
      
      

         
 Горизонтальный желоб 
      
   


   

      

         
 Вертикальный желоб 
      
      

         
 Вертикальный желоб 
      
      

         
 Вертикальный желоб 
      
      

         
 Вертикальный желоб 
      
   


   

      

         
 Желоб V&H 
      
      

         
 Желоб V&H 
      
      

         
 Желоб V&H 
      
      

         
 Желоб V&H 
      
   


   

      

         
 Без желоба 
      
      

         
 Без желоба 
      
   

 

 
  
     1 из 3 
     2 из 3 
     3 из 3 
  


 

 <жидкость в контейнере>
  
 

 
  100% ширины до небольшой точки останова


  100% ширины до средней точки останова


  100% ширины до большой точки останова


  100% ширины до очень большой точки останова
 

 
  
     1 из 2 
     2 из 2 
  

  
     1 из 3 
     2 из 3 
     3 из 3 
  


 

 
  
     Столбец 
     Столбец 
    
 
     Столбец 
     Столбец 
  


 

 
  
     1 из 3 
     2 из 3 (шире) 
     3 из 3 
  

  
     1 из 3 
     2 из 3 (шире) 
     3 из 3 
  


 

 
  
     1 из 3 
     Содержимое переменной ширины 
     3 из 3 
  

  
     1 из 3 
     Содержимое переменной ширины 
     3 из 3 
  


 

 
  
     col 
     col 
     col 
     col 
  

  
     col-8 
     col-4 
  


 

 
  
     col-sm-8 
     col-sm-4 
  

  
     col-sm 
     col-sm 
     col-sm 
  


 

 
  
  
     cols = "12" md = "8" 
     cols = "6" md = "4" 
  

  
  
     cols = "6" md = "4" 
     cols = "6" md = "4" 
     cols = "6" md = "4" 
  

  
  
     cols = "6" 
     cols = "6" 
  


 

 
  
     Один из трех столбцов 
     Один из трех столбцов 
     Один из трех столбцов 
  

  
     Один из трех столбцов 
     Один из трех столбцов 
     Один из трех столбцов 
  

  
     Один из трех столбцов 
     Один из трех столбцов 
     Один из трех столбцов 
  

  
     Один из трех столбцов 
     Один из трех столбцов 
     Один из трех столбцов 
  

  
     Один из трех столбцов 
     Один из трех столбцов 
     Один из трех столбцов 
  


 

 
  
     Один из трех столбцов 
     Один из трех столбцов 
     Один из трех столбцов 
  
  
     Один из двух столбцов 
     Один из двух столбцов 
  


 

 
  
     Один из двух столбцов 
     Один из двух столбцов 
  

  
     Один из двух столбцов 
     Один из двух столбцов 
  

  
     Один из двух столбцов 
     Один из двух столбцов 
  

  
     Один из двух столбцов 
     Один из двух столбцов 
  

  
     Один из двух столбцов 
     Один из двух столбцов 
  


 

 <жидкость в контейнере>
  
     Сначала в DOM, порядок не применяется 
     Второй в DOM, с большим порядком 
     Третий в DOM, с порядком 1 
  

  
     Сначала в DOM, порядка 6 
     Второй в DOM с порядком 1 
     Третий в DOM, порядок не применяется 
  


 

 <жидкость в контейнере>
  
     md = "4" 
     md = "4" offset-md = "4" 
  

  
     md = "3" offset-md = "3" 
     md = "3" offset-md = "3" 
  

  
     md = "6" offset-md = "3" 
  


 

 
  
     sm = "5" md = "6" 
     sm = "5" смещение-sm = "2" md = "6" смещение-md = «0» 
  

  
     sm = "6" md = "5" lg = "6" 
     sm = "6" md = "5" смещение-md = "2 "col-lg =" 6 "смещение-lg =" 0 "
  


 

 <жидкость в контейнере>
  
     md = "4" 
     md = "4" .ml-auto 
  

  
     md = "3" .ml-md-auto 
     md = "3" .ml-md-auto 
  

  
     cols = "auto" .mr-auto 
     cols = "auto" 
  


 

 <жидкость в контейнере>
  
    
      Уровень 1: sm = "9"
      
         Уровень 2: cols = "8" sm = "6" 
         Уровень 2: cols = "4" sm = "6" 
      
    
  


 

 
  
     Столбец 
     Столбец 
     Столбец 
     Столбец 
  



  
     Столбец 
     Столбец 
     Столбец 
     Столбец 
  



  
     Столбец 
     Столбец 
     Столбец 
     Столбец 
  



  
     Столбец 
     Столбец 
     Столбец 
     Столбец 
  


 

 
  
     Столбец 
     Столбец 
     Столбец 
     Столбец 
     Столбец 
     Столбец 
  


 

 
  
 
  
 
  1 из 1  
 
  
 
  
 

 
 <Контейнерная жидкость> 
 
  
 
  1 из 1  
 
  
 
  
 

 
  
 
  
 
  1 из 1  
 
  
 
  
 

 
  
 
  
 
  1 из 2  
 
  2 из 2  
 
  
 
  
 
  1 из 3  
 
  2 из 3  
 
  3 из 3  
 
  
 
  
 

 
  
 
  
 
  1 из 3  
 
  2 из 3 (шире)  
 
  3 из 3  
 
  
 
  
 
  1 из 3  
 
  2 из 3 (шире)  
 
  3 из 3  
 
  
 
  
 

 
  
 
  
 
  
 
 1 из 3 
 
  
 
 < Col md = "auto"> Содержимое переменной ширины  
 
  
 
 3 из 3 
 
  
 
  
 
  
 
 < Столбец> 1 из 3  
 
  Содержимое переменной ширины  
 
  
 
 3 из 3 
 
  
 
  
 
  
 

 
  
 
  
 
  sm = 8  
 
  sm = 4  
 
  
 
  
 
  sm = true  
 
  sm = true  
 
  sm = true  
 
  
 
  
 

 
  
 
 {} 
 
  
 
  
 
 xs = 12 md = 8 
 
  
 
 < Col xs = {6} md = {4}> 
 
 xs = 6 md = 4 
 
  
 
  
 
 {} 
 
  
 
  
 
 xs = 6 md = 4 
 
  
 
  
 
 xs = 6 md = 4 
 
  
 
  
 
 xs = 6 md = 4 
 
  
 
  
 
 {} 
 
  
 
  xs = 6  
 
  xs = 6  
 
  
 
  
 

 
  
 
  
 
  Первый, но неупорядоченный  
 
  Второй, но последний  
 
  Третий, но второй  
 
  
 
  
 

 
  
 
  
 
  Первый, но последний  
 
  Второй, но неупорядоченный  
 
  Третий, но первый  
 
  
 
  
 

 
  
 
  
 
  md = 4  
 
  { `md = {{span: 4, offset: 4}}`}  
 
  
 
  
 
  { `md = {{span: 3, offset: 3}}`}  
 
  {`md = {{span: 3, offset: 3}} `}  
 
  
 
  
 
  {` md = {{span: 6, offset: 3}} `}  
 
  
 
  
 

 
  
 
  
 
  1 из 2  
 
  2 из 2 < / Col> 
 
  
 
  
 
  1 из 3  
 
  2 из 3  
 
  3 из 3  
 
  
 
  
 
  1 из 3  
 
  2 из 3  
 
  3 из 3  
 
  
 
  
 

 
  
 
  
 
  1 из 3  
 
  2 из 3  
 
  3 из 3