web-dev-qa-db-fra.com

Bootstrap 3.1 Comment utiliser mixin make-grid-columns ()?

J'avais l'habitude d'utiliser Bootstrap 3.0, et compilé mes CSS à partir des fichiers bootstrap moins + certains de mes propres moins).

Dans cela, certaines de mes classes adoptent des styles bootstrap comme celui-ci:

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

Cela a très bien fonctionné dans Bootstrap 3.0, car toutes les classes col-md-X sont définies comme moins de variables. Mais dans Bootstrap 3.1 cela semble être en quelque sorte remplacé avec une fonction mixin appelée make-grid-columns ().

Quelqu'un sait-il comment utiliser ce mixage et comment porter la construction ci-dessus dans Bootstrap 3.1?: - /

gridtwitter-bootstrap-3less
28
hasse

Selon la documentation , vous pouvez utiliser le mixage .make-md-column(3);, par exemple:

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

Voici la grille écrite en bootstrap classique:

<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>

Et ceci est auto-compilé:

.productgrid {

  .make-row();
  .clearfix;

  .product {

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

Le balisage de résultat ressemblera à ceci:

<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