是否可以指定 16 列来引导 3 [英] Is it possible to specify 16 colums to bootstrap 3

问题描述

我有点困惑.我正在尝试将 boostrap 3 网格调整为 16 列.

I'm a bit confused. I'm tying to adapt the boostrap 3 grid to 16 column.

我正在我的 variable.less 中更改这些变量:

I'm changing these vars in my variable.less:

@grid-columns: 16;
@gridColumnWidth: 32px;
@gridGutterWidth: 30px

但是当我检查我的 col-lg-12 类时，它仍然有 100% 的宽度.

But still when I inspect my col-lg-12 class, it has a 100% width.

推荐答案

将此网格生成器添加为 *.less 文件

Add this grid generator as *.less file

/**
  GRID GENERATOR

  .grid-generator(16,20px,'mycol','myrow');

  generate 16-column grid with 20px-gutter

  ROW

    .myrow{...}

  COLUMNS

    .mycol-1{...} ... .mycol-16{...}

  OFFSETS

    .mycol-offset-1{...} ... .mycol-offset-15{...}

  PULLS

    .mycol-pull-0{...} ... .mycol-pull-15{...}

  PUSHS

    .mycol-push-0{...} ... .mycol-push-15{...}

  or for Bootstrap 3

  standard bootstrap-3 grid

    .grid-generator-responsive();

  16-column bootstrap-3 grid with 20px gutter

    .grid-generator-responsive(16, 20px);

  @author: [e-mail]

 */

.grid-generator(@cols: 12, @gutter: 30px, @col-name: 'col', @row-name: 'row', @offsets: true, @ordering: true){

  // row container
  .init-row() when (@row-name > '') {
    @name: ~".@{row-name}";
    @{name}{
      margin-left: (@gutter / -2);
      margin-right: (@gutter / -2);
      &:before,&:after{
        content: " ";
        display: table;
      }
      &:after{
        clear: both;
      }
    }
  }
  .init-row();

  // common properties
  .properties(@index) when (@index = @cols)
  {
    @name: ~".@{col-name}-@{index}";
    .properties(@index - 1, @name);
  }

  .properties(@index, @names) when (@index > 0)
  {
    @name: ~".@{col-name}-@{index}";
    .properties(@index - 1, ~"@{names}, @{name}");
  }

  .properties(@index, @names) when (@index = 0)
  {
    @{names}
    {
      position: relative;
      min-height: 1px;
      padding-left: (@gutter / 2);
      padding-right: (@gutter / 2);
      float: left;
    }
  }

  .properties(@cols);

  // unfloat for full width
  @lname: ~".@{col-name}-@{cols}";
  @{lname} {
    float: none;
  }

  // WIDTH of columns
  .width(@index) when (@index > 0)
  {
    @name: ~".@{col-name}-@{index}";
    @{name}
    {
      width: (100% / @cols * @index);
    }
    .width(@index - 1);
  }

  .width(@cols);

  // OFFSET
  .offset(@index) when (@index > 0) and (@offsets)
  {
    @name: ~".@{col-name}-offset-@{index}";
    @{name}
    {
      margin-left: (100% / @cols * @index);
    }
    .offset(@index - 1);
  }
  .offset(@index) when (@index = 0) and (@offsets)
  {
    @name: ~".@{col-name}-offset-@{index}";
    @{name}
    {
      margin-left: 0;
    }
  }
  .offset(@cols - 1);

  // PUSH
  .push(@index) when (@index > 0) and (@ordering)
  {
    @name: ~".@{col-name}-push-@{index}";
    @{name}
    {
      left: (100% / @cols * @index);
    }
    .push(@index - 1);
  }
  .push(@index) when (@index = 0) and (@ordering)
  {
    @name: ~".@{col-name}-push-@{index}";
    @{name}
    {
      left: auto;
    }
  }
  .push(@cols - 1);

  // PULL
  .pull(@index) when (@index > 0) and (@ordering)
  {
    @name: ~".@{col-name}-pull-@{index}";
    @{name}
    {
      right: (100% / @cols * @index);
    }
    .pull(@index - 1);
  }
  .pull(@index) when (@index = 0) and (@ordering)
  {
    @name: ~".@{col-name}-pull-@{index}";
    @{name}
    {
      right: auto;
    }
  }
  .pull(@cols - 1);

}

// standard bootstrap-3 grid
//   .grid-generator-responsive();

// 16-column bootstrap-3 grid with 20px gutter
//   .grid-generator-responsive(16, 20px);

.grid-generator-responsive(@cols: 12, @gutter: 30px, @col-name: 'col', @row-name: 'row'){

  // XS
  .grid-generator(@cols, @gutter, ~"@{col-name}-xs", @row-name, false, false);

  // SM
  @media (min-width: 768px) {
    .grid-generator(@cols, @gutter, ~"@{col-name}-sm", '');
  }

  // MD
  @media (min-width: 992px) {
    .grid-generator(@cols, @gutter, ~"@{col-name}-md", '');
  }

  // MD only
  @media (min-width: 1200px){
    .grid-generator(@cols, @gutter, ~"@{col-name}-lg", '');
  }
}

并添加更少的代码

.grid-generator-responsive(16, 30px, 'col', 'row');

或使用默认值

.grid-generator-responsive(16);

它将生成带有 30px 间距的 16 列引导网格

It will generate 16-column bootstrap grid with 30px gutter

这篇关于是否可以指定 16 列来引导 3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！