Bootstrap 3: добавление нового набора столбцов

Я использовал Bootstrap 3 какое-то время, и теперь мне нужно создать новый набор дополнительных маленьких столбцов для горизонтальных мобильных телефонов (например, 384px ширина экрана), и после этого используйте его следующим образом:

col-xxs-1, col-xxs-2, col-xxs-offset-5, hidden-xxs и т.д.

Существуют ли для этой цели некоторые Bootstrap Less mixins? Я не уверен, как их использовать.

изменить:

Существует микширование Bootstrap, называемое .make-grid(), но я не могу заставить его работать.

Ответ 1

эта полная реализация (включая pull-push-offset-visible-hidden) будет реализована в версии 4, как указано @mdo

здесь https://github.com/twbs/bootstrap/issues/10203#issuecomment-23823054

и здесь https://github.com/twbs/bootstrap/pull/12893.

Возможная альтернатива размещена здесь https://github.com/donquixote/bootstrap-compiled/tree/xs-AB-subdivision.

Ответ 2

Код для col-xxs-x, col-xxs-offset, col-xxs-push, col-xxs-pull:

Добавить этот код:

.col-xxs-1, .col-xxs-2, .col-xxs-3, .col-xxs-4,
.col-xxs-5, .col-xxs-6, .col-xxs-7, .col-xxs-8,
.col-xxs-9, .col-xxs-10, .col-xxs-11, .col-xxs-12 {
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
}

@media (max-width: 384px) {
    .col-xxs-1,
    .col-xxs-2,
    .col-xxs-3,
    .col-xxs-4,
    .col-xxs-5,
    .col-xxs-6,
    .col-xxs-7,
    .col-xxs-8,
    .col-xxs-9,
    .col-xxs-10,
    .col-xxs-11 {
        float: left;
    }

    .col-xxs-1 {
        width: 8.333333333333332%;
    }

    .col-xxs-2 {
        width: 16.666666666666664%;
    }

    .col-xxs-3 {
        width: 25%;
    }

    .col-xxs-4 {
        width: 33.33333333333333%;
    }

    .col-xxs-5 {
        width: 41.66666666666667%;
    }

    .col-xxs-6 {
        width: 50%;
    }

    .col-xxs-7 {
        width: 58.333333333333336%;
    }

    .col-xxs-8 {
        width: 66.66666666666666%;
    }

    .col-xxs-9 {
        width: 75%;
    }

    .col-xxs-10 {
        width: 83.33333333333334%;
    }

    .col-xxs-11 {
        width: 91.66666666666666%;
    }

    .col-xxs-12 {
        width: 100%;
    }

    .col-xxs-push-1 {
        left: 8.333333333333332%;
    }

    .col-xxs-push-2 {
        left: 16.666666666666664%;
    }

    .col-xxs-push-3 {
        left: 25%;
    }

    .col-xss-push-4 {
        left: 33.33333333333333%;
    }

    .col-xxs-push-5 {
        left: 41.66666666666667%;
    }

    .col-xxs-push-6 {
        left: 50%;
    }

    .col-xxs-push-7 {
        left: 58.333333333333336%;
    }

    .col-xxs-push-8 {
        left: 66.66666666666666%;
    }

    .col-xxs-push-9 {
        left: 75%;
    }

    .col-xxs-push-10 {
       left: 83.33333333333334%;
    }

    .col-xxs-push-11 {
       left: 91.66666666666666%;
    }

    .col-xxs-pull-1 {
        right: 8.333333333333332%;
    }

    .col-xxs-pull-2 {
        right: 16.666666666666664%;
    }

    .col-xxs-pull-3 {
        right: 25%;
    }

    .col-xxs-pull-4 {
        right: 33.33333333333333%;
    }

    .col-xxs-pull-5 {
        right: 41.66666666666667%;
    }

    .col-xxs-pull-6 {
        right: 50%;
    }

    .col-xxs-pull-7 {
        right: 58.333333333333336%;
    }

    .col-xxs-pull-8 {
        right: 66.66666666666666%;
    }

    .col-xxs-pull-9 {
        right: 75%;
    }

    .col-xxs-pull-10 {
        right: 83.33333333333334%;
    }

    .col-xxs-pull-11 {
        right: 91.66666666666666%;
    }

    .col-xxs-offset-1 {
        margin-left: 8.333333333333332%;
    }

    .col-xxs-offset-2 {
        margin-left: 16.666666666666664%;
    }

    .col-xxs-offset-3 {
        margin-left: 25%;
    }

    .col-xxs-offset-4 {
        margin-left: 33.33333333333333%;
    }

    .col-xxs-offset-5 {
        margin-left: 41.66666666666667%;
    }

    .col-xxs-offset-6 {
        margin-left: 50%;
    }

    .col-xxs-offset-7 {
        margin-left: 58.333333333333336%;
    }

    .col-xxs-offset-8 {
        margin-left: 66.66666666666666%;
    }

    .col-xxs-offset-9 {
        margin-left: 75%;
    }

    .col-xxs-offset-10 {
        margin-left: 83.33333333333334%;
    }

    .col-xxs-offset-11 {
        margin-left: 91.66666666666666%;
    }
}

Код для hidden-xxs:

Добавить этот код:

.hidden-xxs {
    display: block !important;
}

tr.hidden-xxs {
    display: table-row !important;
}

th.hidden-xxs,
td.hidden-xxs {
    display: table-cell !important;
}

@media (max-width: 384px) {

    .hidden-xxs {
        display: none !important;
    }

    tr.hidden-xxs {
        display: none !important;
    }

    th.hidden-xxs,
    td.hidden-xxs {
        display: none !important;
    }

}

@media (min-width: 385px) and (max-width: 767px) {

    .hidden-xxs.hidden-xs {
        display: none !important;
    }

    tr.hidden-xxs.hidden-xs {
        display: none !important;
    }

    th.hidden-xxs.hidden-xs,
    td.hidden-xxs.hidden-xs {
        display: none !important;
    }

}

@media (min-width: 768px) and (max-width: 991px) {

    .hidden-xxs.hidden-sm {
        display: none !important;
    }

    tr.hidden-xxs.hidden-sm {
        display: none !important;
    }

    th.hidden-xxs.hidden-sm,
    td.hidden-xxs.hidden-sm {
        display: none !important;
    }

}

@media (min-width: 992px) and (max-width: 1199px) {

    .hidden-xxs.hidden-md {
        display: none !important;
    }

    tr.hidden-xxs.hidden-md {
        display: none !important;
    }

    th.hidden-xxs.hidden-md,
    td.hidden-xxs.hidden-md {
        display: none !important;
    }

}

@media (min-width: 1200px) {

    .hidden-xxs.hidden-lg {
        display: none !important;
    }

    tr.hidden-xxs.hidden-lg {
        display: none !important;
    }

    th.hidden-xxs.hidden-lg,
    td.hidden-xxs.hidden-lg {
        display: none !important;
    }

}

@media (max-width: 384px) {

    .hidden-xs.hidden-xxs {
        display: none !important;
    }

    tr.hidden-xs.hidden-xxs {
        display: none !important;
    }

    th.hidden-xs.hidden-xxs,
    td.hidden-xs.hidden-xxs {
        display: none !important;
    }

}

@media (max-width: 384px) {

    .hidden-sm.hidden-xxs {
        display: none !important;
    }

    tr.hidden-sm.hidden-xxs {
        display: none !important;
    }

    th.hidden-sm.hidden-xxs,
    td.hidden-sm.hidden-xxs {
        display: none !important;
    }

}

@media (max-width: 384px) {

    .hidden-md.hidden-xxs {
        display: none !important;
    }

    tr.hidden-md.hidden-xxs {
        display: none !important;
    }

    th.hidden-md.hidden-xxs,
    td.hidden-md.hidden-xxs {
        display: none !important;
    }

}

@media (max-width: 384px) {

    .hidden-lg.hidden-xxs {
        display: none !important;
    }

    tr.hidden-lg.hidden-xxs {
        display: none !important;
    }

    th.hidden-lg.hidden-xxs,
    td.hidden-lg.hidden-xxs {
        display: none !important;
    }
}

И также замените:

@media (max-width: 767px) {

@media (min-width: 385px) and (max-width: 767px) {

внутри bootstrap.css в этом 4-х блоках:

@media (max-width: 767px) { //line 5640 in default bootstrap.css v3.0.0
  .hidden-xs {
    display: none !important;
  }
  tr.hidden-xs {
    display: none !important;
  }
  th.hidden-xs,
  td.hidden-xs {
    display: none !important;
  }
}

@media (max-width: 767px) { //line 5698 in default bootstrap.css v3.0.0
  .hidden-sm.hidden-xs {
    display: none !important;
  }
  tr.hidden-sm.hidden-xs {
    display: none !important;
  }
  th.hidden-sm.hidden-xs,
  td.hidden-sm.hidden-xs {
    display: none !important;
  }
}

@media (max-width: 767px) { //line 5756 in default bootstrap.css v3.0.0
  .hidden-md.hidden-xs {
    display: none !important;
  }
  tr.hidden-md.hidden-xs {
    display: none !important;
  }
  th.hidden-md.hidden-xs,
  td.hidden-md.hidden-xs {
    display: none !important;
  }
}

@media (max-width: 767px) { //line 5814 in default bootstrap.css v3.0.0
  .hidden-lg.hidden-xs {
    display: none !important;
  }
  tr.hidden-lg.hidden-xs {
    display: none !important;
  }
  th.hidden-lg.hidden-xs,
  td.hidden-lg.hidden-xs {
    display: none !important;
  }
}

Код для visible-xxs:

Добавить этот код:

.visible-xxs {
    display: none !important;
}

tr.visible-xxs {
    display: none !important;
}

th.visible-xxs,
td.visible-xxs {
    display: none !important;
}

@media (max-width: 384px) {

    .visible-xxs {
        display: block !important;
    }

    tr.visible-xxs {
        display: table-row !important;
    }

    th.visible-xxs,
    td.visible-xxs {
        display: table-cell !important;
    }

}

@media (min-width: 385px) and (max-width: 767px) {

    .visible-xxs.visible-xs {
        display: block !important;
    }

    tr.visible-xxs.visible-xs {
        display: table-row !important;
    }

    th.visible-xxs.visible-xs,
    td.visible-xxs.visible-xs {
        display: table-cell !important;
    }

}

@media (min-width: 768px) and (max-width: 991px) {

    .visible-xxs.visible-sm {
        display: block !important;
    }

    tr.visible-xxs.visible-sm {
        display: table-row !important;
    }

    th.visible-xxs.visible-sm,
    td.visible-xxs.visible-sm {
        display: table-cell !important;
    }

}

@media (min-width: 992px) and (max-width: 1199px) {

    .visible-xxs.visible-md {
        display: block !important;
    }

    tr.visible-xxs.visible-md {
        display: table-row !important;
    }

    th.visible-xxs.visible-md,
    td.visible-xxs.visible-md {
        display: table-cell !important;
    }

}

@media (min-width: 1200px) {

    .visible-xxs.visible-lg {
        display: block !important;
    }

    tr.visible-xxs.visible-lg {
        display: table-row !important;
    }

    th.visible-xxs.visible-lg,
    td.visible-xxs.visible-lg {
        display: table-cell !important;
    }

}

@media (max-width: 384px) {

    .visible-xs.visible-xxs {
        display: block !important;
    }

    tr.visible-xs.visible-xxs {
        display: table-row !important;
    }

    th.visible-xs.visible-xxs,
    td.visible-xs.visible-xxs {
        display: table-cell !important;
    }

}

@media (max-width: 384px) {

    .visible-sm.visible-xxs {
        display: block !important;
    }

    tr.visible-sm.visible-xxs {
        display: table-row !important;
    }

    th.visible-sm.visible-xxs,
    td.visible-sm.visible-xxs {
        display: table-cell !important;
    }

}

@media (max-width: 384px) {

    .visible-md.visible-xxs {
        display: block !important;
    }

    tr.visible-md.visible-xxs {
        display: table-row !important;
    }

    th.visible-md.visible-xxs,
    td.visible-md.visible-xxs {
        display: table-cell !important;
    }

}

@media (max-width: 384px) {

    .visible-lg.visible-xxs {
        display: block !important;
    }

    tr.visible-lg.visible-xxs {
        display: table-row !important;
    }

    th.visible-lg.visible-xxs,
    td.visible-lg.visible-xxs {
        display: table-cell !important;
    }

}

И также замените:

@media (max-width: 767px) {

@media (min-width: 385px) and (max-width: 767px) {

внутри bootstrap.css в этом 4-х блоках:

@media (max-width: 767px) { //line 5408 in default bootstrap.css v3.0.0
  .visible-xs {
    display: block !important;
  }
  tr.visible-xs {
    display: table-row !important;
  }
  th.visible-xs,
  td.visible-xs {
    display: table-cell !important;
  }
}

@media (max-width: 767px) { //line 5466 in default bootstrap.css v3.0.0
  .visible-sm.visible-xs {
    display: block !important;
  }
  tr.visible-sm.visible-xs {
    display: table-row !important;
  }
  th.visible-sm.visible-xs,
  td.visible-sm.visible-xs {
    display: table-cell !important;
  }
}

@media (max-width: 767px) { //line 5524 in default bootstrap.css v3.0.0
  .visible-md.visible-xs {
    display: block !important;
  }
  tr.visible-md.visible-xs {
    display: table-row !important;
  }
  th.visible-md.visible-xs,
  td.visible-md.visible-xs {
    display: table-cell !important;
  }
}

@media (max-width: 767px) { //line 5582 in default bootstrap.css v3.0.0
  .visible-lg.visible-xs {
    display: block !important;
  }
  tr.visible-lg.visible-xs {
    display: table-row !important;
  }
  th.visible-lg.visible-xs,
  td.visible-lg.visible-xs {
    display: table-cell !important;
  }
}

Ответ 3

Обратите внимание, что Bootstrap CSS использует мобильную первую стратегию, поэтому важно определить вашу xxs-сетку (я должен выбрать другое имя) после xs-grid, но до sm-grid. См. Также: Bootstrap 3 mixin multiple make - * - column.

По этой причине вы не можете использовать код Less из этого вопроса Бутстрап 3 дополнительных больших (xl) столбца

Загрузите исходный код Bootstrap по адресу: http://getbootstrap.com/getting-started/
в less/variables.less добавить:

// horizontal mobiles
@screen-xxs-min:             384px;
@container-xxs: (336px + @grid-gutter-width);

Откройте less/grid.less измените класс .container следующим образом:

.container {
  .container-fixed();
  @media (min-width: @screen-xxs-min) {
    width: @container-xxs;
  }

  @media (min-width: @screen-sm-min) {
    width: @container-sm;
  }
  @media (min-width: @screen-md-min) {
    width: @container-md;
  }
  @media (min-width: @screen-lg-min) {
    width: @container-lg;
  }

и между дополнительной сеткой и маленьким кодом сетки add:

@media (min-width: @screen-xxs-min) {
  .make-grid(xxs);
}

В файле "less/mixins/grid-framework.less" замените дважды @item: ~"[email protected]{index}, [email protected]{index}, [email protected]{index}, [email protected]{index}"; на @item: ~"[email protected]{index}, [email protected]{index}, [email protected]{index}, [email protected]{index}, [email protected]{index}";
И, наконец, запустите grunt dist
1. (необязательно) добавьте следующий код в файл /less/mixins/grid.less

// Generate the small columns
.make-xxs-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  min-height: 1px;
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  @media (min-width: @screen-xxs-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}
.make-xxs-column-offset(@columns) {
  @media (min-width: @screen-xxs-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-xxs-column-push(@columns) {
  @media (min-width: @screen-xxs-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-xxs-column-pull(@columns) {
  @media (min-width: @screen-xxs-min) {
    right: percentage((@columns / @grid-columns));
  }
}

Ответ 4

используя код из альтернативного github, который отправил @facundo, я переключил первую строку с минимальной ширины 480 пикселей на минимальную ширину 0 и максимальную ширину 480 пикселей и, похоже, работал для того, что мне нужно без использования каких-либо других кодировок или файлов:

   @media (min-width: 0px) and (max-width:480px){
  .col-xs-B-1, .col-xs-B-2, .col-xs-B-3, .col-xs-B-4, .col-xs-B-5, .col-xs-B-6, .col-xs-B-7, .col-xs-B-8, .col-xs-B-9, .col-xs-B-10, .col-xs-B-11, .col-xs-B-12 {
    float: left;
  }
  .col-xs-B-12 {
    width: 100%;
  }
  .col-xs-B-11 {
    width: 91.66666667%;
  }
  .col-xs-B-10 {
    width: 83.33333333%;
  }
  .col-xs-B-9 {
    width: 75%;
  }
  .col-xs-B-8 {
    width: 66.66666667%;
  }
  .col-xs-B-7 {
    width: 58.33333333%;
  }
  .col-xs-B-6 {
    width: 50%;
  }
  .col-xs-B-5 {
    width: 41.66666667%;
  }
  .col-xs-B-4 {
    width: 33.33333333%;
  }
  .col-xs-B-3 {
    width: 25%;
  }
  .col-xs-B-2 {
    width: 16.66666667%;
  }
  .col-xs-B-1 {
    width: 8.33333333%;
  }
  .col-xs-B-pull-12 {
    right: 100%;
  }
  .col-xs-B-pull-11 {
    right: 91.66666667%;
  }
  .col-xs-B-pull-10 {
    right: 83.33333333%;
  }
  .col-xs-B-pull-9 {
    right: 75%;
  }
  .col-xs-B-pull-8 {
    right: 66.66666667%;
  }
  .col-xs-B-pull-7 {
    right: 58.33333333%;
  }
  .col-xs-B-pull-6 {
    right: 50%;
  }
  .col-xs-B-pull-5 {
    right: 41.66666667%;
  }
  .col-xs-B-pull-4 {
    right: 33.33333333%;
  }
  .col-xs-B-pull-3 {
    right: 25%;
  }
  .col-xs-B-pull-2 {
    right: 16.66666667%;
  }
  .col-xs-B-pull-1 {
    right: 8.33333333%;
  }
  .col-xs-B-pull-0 {
    right: 0%;
  }
  .col-xs-B-push-12 {
    left: 100%;
  }
  .col-xs-B-push-11 {
    left: 91.66666667%;
  }
  .col-xs-B-push-10 {
    left: 83.33333333%;
  }
  .col-xs-B-push-9 {
    left: 75%;
  }
  .col-xs-B-push-8 {
    left: 66.66666667%;
  }
  .col-xs-B-push-7 {
    left: 58.33333333%;
  }
  .col-xs-B-push-6 {
    left: 50%;
  }
  .col-xs-B-push-5 {
    left: 41.66666667%;
  }
  .col-xs-B-push-4 {
    left: 33.33333333%;
  }
  .col-xs-B-push-3 {
    left: 25%;
  }
  .col-xs-B-push-2 {
    left: 16.66666667%;
  }
  .col-xs-B-push-1 {
    left: 8.33333333%;
  }
  .col-xs-B-push-0 {
    left: 0%;
  }
  .col-xs-B-offset-12 {
    margin-left: 100%;
  }
  .col-xs-B-offset-11 {
    margin-left: 91.66666667%;
  }
  .col-xs-B-offset-10 {
    margin-left: 83.33333333%;
  }
  .col-xs-B-offset-9 {
    margin-left: 75%;
  }
  .col-xs-B-offset-8 {
    margin-left: 66.66666667%;
  }
  .col-xs-B-offset-7 {
    margin-left: 58.33333333%;
  }
  .col-xs-B-offset-6 {
    margin-left: 50%;
  }
  .col-xs-B-offset-5 {
    margin-left: 41.66666667%;
  }
  .col-xs-B-offset-4 {
    margin-left: 33.33333333%;
  }
  .col-xs-B-offset-3 {
    margin-left: 25%;
  }
  .col-xs-B-offset-2 {
    margin-left: 16.66666667%;
  }
  .col-xs-B-offset-1 {
    margin-left: 8.33333333%;
  }
  .col-xs-B-offset-0 {
    margin-left: 0%;
  }
}

Ответ 5

У других есть более сложные решения, но на самом деле существует более простое решение. Поскольку это наименьшая точка останова, вы можете просто добавить класс самостоятельно с помощью важного флага, чтобы он перекрывал большие размеры столбцов (например, это). Я использую имя col-tn-12, потому что это то, что эта точка останова будет вызываться при выкачивании Bootstrap 4.

@media (max-width: 480px) {
    .col-tn-12 {
        width: 100% !important
    }
}

Ответ 6

Спасибо paulalexandru за это отличное и очень полезное решение. Недавно мне нужно было использовать опцию смещения реселлера (col-xxs-offset-0) на самых маленьких экранах, поэтому мне пришлось добавить эти несколько строк, так как это хорошо работает:

@media (max-width: 480px) {
    .col-xxs-pull-0 {
        right: 0;
    }
    .col-xxs-push-0 {
        left: 0;
    }
    .col-xxs-offset-0 {
        margin-left: 0;
    }
}

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

Ответ 7

Вы можете просто удалить медиа-запросы для столбцов из css. Это создавало бы ширину precentage столбцов на любом размере экрана.

Ответ 8

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

SCSS

@media (max-width: $screen-xs-min) {
  @include make-grid(xxs);
}

Меньше

@media (max-width: @screen-xs-min) {
  .make-grid(xxs);
}