Вопросы Теги

Как создать следующий макет с использованием карт bootstrap 4.0.0 [duplicate]

Опубликовать другую альтернативу, чтобы быть более полной. Когда я попробовал ответы на основе «pre», они добавили дополнительные вертикальные разрывы строк.

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

"    "

Это не рекомендуется для многократного / широкого использования на странице. Подход div / padding будет намного более чистым.

23
задан danopz 16 September 2016 в 13:29
поделиться

3 ответа

Bootstrap 4 (4.0.0-alpha.2) использует свойство css column-count в классе card-columns, чтобы определить, сколько столбцов карт будет отображаться внутри элемента div. Но это свойство имеет только два значения:

  • Значение по умолчанию 1 для небольших экранов (max-width: 34em)
  • Значение 3 для всех других размеров (min-width: 34em)

Вот как это реализовано в bootstrap.min.css : 

@media (min-width: 34em) {
    .card-columns {
        -webkit-column-count:3;
        -moz-column-count:3;
        column-count:3;
        ⋮
    }
    ⋮
}

Чтобы сделать сборку карты чувствительной, вы можете добавить следуя медиа-запросам в ваш файл css и измените значения для min-width в соответствии с вашими требованиями: 

@media (min-width: 34em) {
    .card-columns {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
    }
}

@media (min-width: 48em) {
    .card-columns {
        -webkit-column-count: 3;
        -moz-column-count: 3;
        column-count: 3;
    }
}

@media (min-width: 62em) {
    .card-columns {
        -webkit-column-count: 4;
        -moz-column-count: 4;
        column-count: 4;
    }
}

@media (min-width: 75em) {
    .card-columns {
        -webkit-column-count: 5;
        -moz-column-count: 5;
        column-count: 5;
    }
}
23
ответ дан Faheel Ahmad 16 August 2018 в 00:39
поделиться
  • 1
    Я обнаружил, что это работает только с вашим кодом. По моему опыту, значение по умолчанию 3 было неправильно применено в alpha4. Благодаря! – benjaoming 26 January 2016 в 00:41
2
ответ дан safrazik 16 August 2018 в 00:39
поделиться

Обновление 2018 - Bootstrap 4

Вы можете просто использовать SASS mixin для изменения количества карт в каждом уровне точки останова / сетки. 

.card-columns {
  @include media-breakpoint-only(xl) {
    column-count: 5;
  }
  @include media-breakpoint-only(lg) {
    column-count: 4;
  }
  @include media-breakpoint-only(md) {
    column-count: 3;
  }
  @include media-breakpoint-only(sm) {
    column-count: 2;
  }
}

SASS Demo: http://www.codeply.com/go/FPBCQ7sOjX

Или CSS только так ... 

@media (min-width: 576px) {
    .card-columns {
        column-count: 2;
    }
}

@media (min-width: 768px) {
    .card-columns {
        column-count: 3;
    }
}

@media (min-width: 992px) {
    .card-columns {
        column-count: 4;
    }
}

@media (min-width: 1200px) {
    .card-columns {
        column-count: 5;
    }
}

CSS-only Демо: https://www.codeply.com/go/FIqYTyyWWZ

14
ответ дан Themes.guide 16 August 2018 в 00:39
поделиться
  • 1
    Большое спасибо за версию только для CSS. Изменить: работает в Bootstrap beta 2 – warmwhisky 14 November 2017 в 10:18
  • 2
    Вы знаете, как это сделать с помощью колоды карт? Это 2 часа, я ищу способ сделать это, и не мог найти никакого решения. – davidthegrey 2 March 2018 в 17:35
  • 3
    Вы видели этот ответ ? Вы должны использовать пустые divs в разных точках останова, чтобы сделать карты карточной карты: codeply.com/go/k2zBsujRhJ – Themes.guide 2 March 2018 в 17:46
Другие вопросы по тегам:

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