web-dev-qa-db-ja.com

Bootstrap 3つの特大（xl）列

BootstrapのLESSビルドでは、5番目のデバイスサイズである特大（col-xl-#）？

twitter-bootstraptwitter-bootstrap-3less
35
dubloons

次のコードを含む他の少ないファイル（たとえば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: ~".col-xlg-@{index}";
    .col((@index + 1), @item);
  }
  .col(@index, @list) when (@index =< @grid-columns) { // general; "=<" isn't a typo
    @item: ~".col-xlg-@{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ミックスインの代わりに、.col-xlg-クラスプレフィックスを追加して、less/minins/grid-framework.lessファイルの.make-grid-columns()ミックスインを変更することもできます。

BS 3.2.0以降、自動コンパイルを使用して、新しいコンパイルバージョンが元のコンパイルバージョンと同じブラウザをサポートしていることを確認する必要があります。 https://github.com/twbs/bootstrap/issues/ 1362 新しいコードのオートフィクサーを実行するには、bootstrap.lessファイル参照をGruntfile.jsの新しいbootstrapxl.lessへの参照に置き換え、変更後にgrunt distを実行します。

update

上記のソリューションは、より大きなグリッドに列クラスを追加する場合にのみ機能することに注意してください。 https://stackoverflow.com/a/26963773/1596547 を参照して、デフォルトのグリッドに重なる列またはグリッドを追加してください。

25
Bass Jobsen

次のリンクを使用して、GitHubからシンプルな小さなCSSファイルをダウンロードできます。 https://github.com/marcvannieuwenhuijzen/BootstrapXL

Bootstrap CSSファイルの後にこのCSSファイルをHTMLに追加すると、col-xl-{size}、col-xl-Push、hidden-xlなど。メディアクエリブレークポイントは1600px;

UpdateBootstrap 4のアルファリリースは、超大画面のネイティブサポートで利用可能になりました。 http ：//blog.getbootstrap.com/2015/08/19/bootstrap-4-alpha/ しかし、特大のブレークポイントはまだ1200pxです。

Update 2（2017年7月）bootstrapの使用を停止して、今日の標準CSSグリッドの使用を開始します。 ここ 。

70
Marc van Nieuwenhuijzen

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

追加のxlg（> 1500px width）およびxxlg（> 2000 px幅）クラスを持つbootstrapグリッドを含むCSSファイル。グリッドは、親divの1/100幅の列に分割されます。 。

1
Sam Henderson

Twitter Bootstrapは、あなたが＃V4超大型デバイスのサポートを今すぐリッスンしました-> http://v4-alpha.getbootstrap.com/layout/grid/#grid-options

1
Harry