Die Schaffung einer Stiftung-style-Block Grid in Bootstrap 3?

In Zurb Foundation 3+, Sie haben eine CSS-Konstrukt der "grid-block" ist eine ungeordnete Liste, wo Sie können geben Sie die Anzahl der Elemente in einer Zeile.

Hier ist Ihre docs drauf.

Es gibt keinen Weg, ich kann sehen, dies zu tun in Bootstrap 3; es gibt nur Spalten. Ich hätte gerne die Fähigkeit zu haben, ein wiederholtes element (wie a-LI) display einfach wie ein responsive grid, wo kann ich angeben, wie viele quer durch den Haltepunkt, wie in der Stiftung.

Ich denke, ich kann Rollen, meine eigene, sondern wollte sehen, ob noch jemand Vorschläge oder hatte dieses vor.

  • Ich habe über genau dieses problem mehrere Male mit Bootstrap/Wordpress. In der Regel richte ich eine foreach-Schleife mit einem Zähler für mein li. Wenn es gleich 0 ist, ich werde echo aus eine neue Zeile, und wenn der Zähler gleich der Anzahl der Spalten möchte ich in der layout -, werde ich das echo aus dem schließenden tag für die Zeile und den Zähler zurücksetzen.
InformationsquelleAutor Steve | 2014-04-21
  1. 6

    Ich wünschte mir auch, war dieses feature in BS3. Sie müssen zum erstellen einer eigenen Lösung.

    Mein typischer workaround ist nur als Stiftung ist es, durch die Verwendung von Prozentwerten definieren, die Breite, den nth-child Selektor und die Anpassung der Margen.

    [class*="block-grid-"] {
    display: block;
    padding: 0;
    margin: 0 -0.55556rem;
}

[class*="block-grid-"] > li {
    display: block;
    height: auto;
    float: left;
    padding: 0 0.55556rem 1.11111rem;
}

.small-block-grid-3 > li {
    width: 33.33333%;
    list-style: none;
}

.small-block-grid-3 > li:nth-of-type(1n) {
    clear: none;
}

.small-block-grid-3 > li:nth-of-type(3n+1) {
    clear: both;
}
    • mit bootstrap 2.3.x. Das Dritte element wurde auf die nächste Zeile umbricht. Ich habe die Breite in der small-block-grid-3 > li, 30% und problem war gelöst.
    • Wie verwenden Sie diese? <ul class="block-grid-3"><li class="small-block-grid-3"></li></ul>
    • Was ist der Punkt, der .small-block-grid-3 > li:nth-of-type(1n)? Dies nur wählt jedes Listenelement, also der clear: none; sollte sich im .small-block-grid-3 > li
    InformationsquelleAutor CChoma
  2. 2

    Quick-and-dirty WENIGER-Datei zu generieren block-grids (von 1 bis @grid-columns) in der Bootstrap-3. Noch brauchen, um reaktionsschnell Klassen (wie block-grid-sm-3 block-grid-lg-6).

    //Bootstrap variables and mixisn
@import "bootstrap/less/variables.less";
@import "bootstrap/less/mixins.less";

.block-grid () {
  padding: 0;

  & > li {
    display: block;
    float: left;
    list-style: none;
  }
}

.make-block-grid (@columns, @spacing: @grid-gutter-width) when (@columns > 0) {
  .block-grid-@{columns} {
    &:extend(.clearfix all);
    .block-grid();

    margin: 0 (-@spacing / 2);

    > li {
      width: 100% / @columns;
      padding: 0 (@spacing / 2) @spacing;

      &:nth-of-type(1n) { clear: none; }
      &:nth-of-type(@{columns}n+1) { clear: both; }
    }
  }

  .make-block-grid(@columns - 1)
}

.make-block-grid(@grid-columns);
    InformationsquelleAutor gremo
  3. 2

    Hier ist eine responsive version gremo Antwort:

    .make-block-grid(@class, @columns: @grid-columns, @spacing: @grid-gutter-width) when (@columns > 0) {
  .block-grid-@{class}-@{columns} {
    .clearfix;

    padding: 0;
    margin: 0 (-@spacing / 2);

    & > li {
      display: block;

      float: left;

      width: 100% / @columns;
      padding: 0 (@spacing / 2) @spacing;

      list-style: none;

      &:nth-of-type(1n) {
        clear: none;
      }
      &:nth-of-type(@{columns}n+1) {
        clear: both;
      }
    }
  }

  .make-block-grid(@class, @columns - 1);
}

.make-block-grid(xs);

@media (min-width: @screen-sm-min) {
  .make-block-grid(sm);
}

@media (min-width: @screen-md-min) {
  .make-block-grid(md);
}

@media (min-width: @screen-lg-min) {
  .make-block-grid(lg);
}
    • Vielen Dank, Stefan! Das ist das, was ich brauchte.
    InformationsquelleAutor Stefan Fisk
Schreibe einen Kommentar