Подтвердить что ты не робот

Бутстрап 3 дополнительных больших (xl) столбца

В Bootstrap LESS build кто-то может рассказать мне, как добавить пятый размер устройства, очень большой (col-xl-#)?

4b9b3361

ОТВЕТЫ

Ответ 1

Вы можете создать другой файл меньшего размера (например, bootstrapxl.less), содержащий следующий код и скомпилировать этот файл:

@import "bootstrap.less";

// XLarge screen
@screen-xlg:                  1600px;
@screen-xlg-min:              @screen-xlg;
@screen-xlg-hughdesktop:      @screen-xlg-min;

// So media queries don't overlap when required, provide a maximum
@screen-lg-max:              (@screen-xlg-min - 1);

//== Container sizes
// Large screen / wide desktop
@container-xlarge-desktop:      ((1540px + @grid-gutter-width));
@container-xlg:                 @container-xlarge-desktop;

// Container widths
//
// Set the container width, and override it for fixed navbars in media queries.

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

.make-grid-xlgcolumns() {
  // Common styles for all sizes of grid columns, widths 1-12
  .col(@index) when (@index = 1) { // initial
    @item: ~"[email protected]{index}";
    .col((@index + 1), @item);
  }
  .col(@index, @list) when (@index =< @grid-columns) { // general; "=<" isn't a typo
    @item: ~"[email protected]{index}";
    .col((@index + 1), ~"@{list}, @{item}");
  }
  .col(@index, @list) when (@index > @grid-columns) { // terminal
    @{list} {
      position: relative;
      // Prevent columns from collapsing when empty
      min-height: 1px;
      // Inner gutter via padding
      padding-left:  (@grid-gutter-width / 2);
      padding-right: (@grid-gutter-width / 2);
    }
  }
  .col(1); // kickstart it
}
.make-grid-xlgcolumns();
.make-grid(xlg);

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

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

Обратите внимание, что вместо .make-grid-xlgcolumns mixin в приведенном выше коде вы также можете изменить микширование .make-grid-columns() в файле less/minins/grid-framework.less, добавив префикс класса .col-xlg-.

Начиная с BS 3.2.0 вы должны использовать autoprefixer, чтобы убедиться, что ваша новая скомпилированная версия имеет ту же поддержку браузера, что и исходная скомпилированная версия, см. также: https://github.com/twbs/bootstrap/issues/13620 Чтобы запустить autofixer для вашего нового кода, замените ссылку на bootstrap.less ссылкой ссылкой на ваш новый bootstrapxl.less в Gruntfile.js и запустите grunt dist после ваших изменений.

Обновление

Обратите внимание, что указанное выше решение работает только при добавлении классов столбцов для большей сетки. См. fooobar.com/questions/53751/..., чтобы добавить столбцы или сетки, которые перекрывают сетки по умолчанию.

Ответ 2

Вы можете загрузить простой маленький файл CSS из GitHub, используя эту ссылку: https://github.com/marcvannieuwenhuijzen/BootstrapXL

Если вы добавите этот CSS файл в HTML после файла CSS Bootstrap, вы сможете использовать col-xl-{size}, col-xl-push, hidden-xl и т.д. Точка прерывания медиа-запроса 1600px;

Обновление Альфа-релиз для Bootstrap 4 теперь доступен с встроенной поддержкой дополнительных больших экранов. http://blog.getbootstrap.com/2015/08/19/bootstrap-4-alpha/, но точка останова для сверхбольшого по-прежнему составляет 1200 пикселей.

Обновление 2 (июль 2017) Прекратите использование бутстрапа и начните использовать стандартные сетки CSS, СЕГОДНЯ. Вы можете найти введение здесь.

Ответ 4

https://github.com/shenders13/bootstrap-grid-100cols-with-xl-and-xxl

Файл CSS, содержащий сетку бутстрапа с дополнительными классами xlg ( > 1500px width) и xxlg ( > 2000 пикселей). Сетка разбивается на столбцы с шириной 1/100 родительского div.