web-dev-qa-db-ja.com

Bootstrap 3.1 mixin make-grid-columns（）を使用するには？

以前はBootstrap 3.0を使用し、bootstrap lessファイル+独自のless.

これで私のクラスのいくつかは、このようないくつかのbootstrapスタイルを採用しています：

.myClass{
    .col-md-3;
    border: 1px solid #000;
    [etc, etc]
}

すべてのcol-md-Xクラスはより少ない変数として定義されているため、Bootstrap 3.0でうまく機能しました。しかし、Bootstrap 3.1 make-grid-columns（）と呼ばれるミックスイン関数を使用します。

誰もがこのミックスインの利用方法と、上記の構成をBootstrap 3.1？に移植する方法を知っていますか？：-/

gridtwitter-bootstrap-3less
28
hasse

ドキュメント によると、.make-md-column(3); mixinを使用できます。例：

.myClass{
    .make-md-column(3); /* Replaces .col-md-3; */
    border: 1px solid #000;
    [etc, etc]
}
60
Olly Hodgson

これは、古典的なブートストラップで書かれたグリッドです。

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2">Meow</div>
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2">Meow</div>
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2">Meow</div>
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2">Meow</div>
</div>

そして、これは自己コンパイルされます：

.productgrid {

  .make-row();
  .clearfix;

  .product {

    .make-xs-column(12);
    .make-sm-column(6);
    .make-md-column(4);
    .make-lg-column(2);
  }
}

結果のマークアップは次のようになります。

<div class="productgrid">
  <div class="product">Meow</div>
  <div class="product">Meow</div>
  <div class="product">Meow</div>
  <div class="product">Meow</div>
</div>
16
alexwenzel