Tworzenie siatek blokowych w stylu podstawowym w Bootstrap 3?

Question

W Zurb Foundation 3+ mają konstrukcję CSS "siatki bloków", która jest nieuporządkowaną listą, na której można określić liczbę elementów z rzędu.

Here's their docs on it.

Nie ma mowy, widzę to zrobić w Bootstrap 3; są tylko kolumny. Chciałbym mieć możliwość łatwego wyświetlania powtarzalnego elementu (takiego jak LI) jako siatki reagowania, w której mogę określić liczbę punktów granicznych, tak jak w Fundacji.

Myślę, że mogę rzucić własną, ale chciałem sprawdzić, czy ktoś miał sugestie lub natknął się na to wcześniej.

Answer 1

Ja też żałuję, że nie była to funkcja w BS3. Musisz stworzyć własne rozwiązanie.

Moje typowe obejście jest takie samo, jak robi to Fundacja, używając procentów do zdefiniowania szerokości, selektora n-tego dziecka i marginesów regulacji.

[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; 
} 

Answer 2

Szybki i brudny MNIEJ plik do generowania siatek Blok (1 do @grid-columns) w Bootstrap 3. Jeszcze trzeba zrobić reagujących klas (jak 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); 

Answer 3

Oto Responsive version GREMO za odpowiedź:

.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); 
} 

Answer 4

Ten css działa dla mnie:

class*="block-grid-"] { 
 
    display: block; 
 
    padding: 0; 
 
    margin: 0 -0.625rem; 
 
    *zoom: 1; } 
 
    [class*="block-grid-"]:before, [class*="block-grid-"]:after { 
 
    content: " "; 
 
    display: table; } 
 
    [class*="block-grid-"]:after { 
 
    clear: both; } 
 
    [class*="block-grid-"] > li { 
 
    display: inline; 
 
    height: auto; 
 
    float: left; 
 
    padding: 0 0.625rem 1.25rem; } 
 

 
@media only screen { 
 
    .small-block-grid-1 > li { 
 
    width: 100%; 
 
    padding: 0 0.625rem 1.25rem; } 
 
    .small-block-grid-1 > li:nth-of-type(n) { 
 
     clear: none; } 
 
    .small-block-grid-1 > li:nth-of-type(1n+1) { 
 
     clear: both; } 
 

 
    .small-block-grid-2 > li { 
 
    width: 50%; 
 
    padding: 0 0.625rem 1.25rem; } 
 
    .small-block-grid-2 > li:nth-of-type(n) { 
 
     clear: none; } 
 
    .small-block-grid-2 > li:nth-of-type(2n+1) { 
 
     clear: both; } 
 

 
    .small-block-grid-3 > li { 
 
    width: 33.33333%; 
 
    padding: 0 0.625rem 1.25rem; } 
 
    .small-block-grid-3 > li:nth-of-type(n) { 
 
     clear: none; } 
 
    .small-block-grid-3 > li:nth-of-type(3n+1) { 
 
     clear: both; } 
 

 
    .small-block-grid-4 > li { 
 
    width: 25%; 
 
    padding: 0 0.625rem 1.25rem; } 
 
    .small-block-grid-4 > li:nth-of-type(n) { 
 
     clear: none; } 
 
    .small-block-grid-4 > li:nth-of-type(4n+1) { 
 
     clear: both; } 
 

 
    .small-block-grid-5 > li { 
 
    width: 20%; 
 
    padding: 0 0.625rem 1.25rem; } 
 
    .small-block-grid-5 > li:nth-of-type(n) { 
 
     clear: none; } 
 
    .small-block-grid-5 > li:nth-of-type(5n+1) { 
 
     clear: both; } 
 

 
    .small-block-grid-6 > li { 
 
    width: 16.66667%; 
 
    padding: 0 0.625rem 1.25rem; } 
 
    .small-block-grid-6 > li:nth-of-type(n) { 
 
     clear: none; } 
 
    .small-block-grid-6 > li:nth-of-type(6n+1) { 
 
     clear: both; } 
 

 
    .small-block-grid-7 > li { 
 
    width: 14.28571%; 
 
    padding: 0 0.625rem 1.25rem; } 
 
    .small-block-grid-7 > li:nth-of-type(n) { 
 
     clear: none; } 
 
    .small-block-grid-7 > li:nth-of-type(7n+1) { 
 
     clear: both; } 
 

 
    .small-block-grid-8 > li { 
 
    width: 12.5%; 
 
    padding: 0 0.625rem 1.25rem; } 
 
    .small-block-grid-8 > li:nth-of-type(n) { 
 
     clear: none; } 
 
    .small-block-grid-8 > li:nth-of-type(8n+1) { 
 
     clear: both; } 
 

 
    .small-block-grid-9 > li { 
 
    width: 11.11111%; 
 
    padding: 0 0.625rem 1.25rem; } 
 
    .small-block-grid-9 > li:nth-of-type(n) { 
 
     clear: none; } 
 
    .small-block-grid-9 > li:nth-of-type(9n+1) { 
 
     clear: both; } 
 

 
    .small-block-grid-10 > li { 
 
    width: 10%; 
 
    padding: 0 0.625rem 1.25rem; } 
 
    .small-block-grid-10 > li:nth-of-type(n) { 
 
     clear: none; } 
 
    .small-block-grid-10 > li:nth-of-type(10n+1) { 
 
     clear: both; } 
 

 
    .small-block-grid-11 > li { 
 
    width: 9.09091%; 
 
    padding: 0 0.625rem 1.25rem; } 
 
    .small-block-grid-11 > li:nth-of-type(n) { 
 
     clear: none; } 
 
    .small-block-grid-11 > li:nth-of-type(11n+1) { 
 
     clear: both; } 
 

 
    .small-block-grid-12 > li { 
 
    width: 8.33333%; 
 
    padding: 0 0.625rem 1.25rem; } 
 
    .small-block-grid-12 > li:nth-of-type(n) { 
 
     clear: none; } 
 
    .small-block-grid-12 > li:nth-of-type(12n+1) { 
 
     clear: both; } } 
 
@media only screen and (min-width: 40.063em) { 
 
    .medium-block-grid-1 > li { 
 
    width: 100%; 
 
    padding: 0 0.625rem 1.25rem; } 
 
    .medium-block-grid-1 > li:nth-of-type(n) { 
 
     clear: none; } 
 
    .medium-block-grid-1 > li:nth-of-type(1n+1) { 
 
     clear: both; } 
 

 
    .medium-block-grid-2 > li { 
 
    width: 50%; 
 
    padding: 0 0.625rem 1.25rem; } 
 
    .medium-block-grid-2 > li:nth-of-type(n) { 
 
     clear: none; } 
 
    .medium-block-grid-2 > li:nth-of-type(2n+1) { 
 
     clear: both; } 
 

 
    .medium-block-grid-3 > li { 
 
    width: 33.33333%; 
 
    padding: 0 0.625rem 1.25rem; } 
 
    .medium-block-grid-3 > li:nth-of-type(n) { 
 
     clear: none; } 
 
    .medium-block-grid-3 > li:nth-of-type(3n+1) { 
 
     clear: both; } 
 

 
    .medium-block-grid-4 > li { 
 
    width: 25%; 
 
    padding: 0 0.625rem 1.25rem; } 
 
    .medium-block-grid-4 > li:nth-of-type(n) { 
 
     clear: none; } 
 
    .medium-block-grid-4 > li:nth-of-type(4n+1) { 
 
     clear: both; } 
 

 
    .medium-block-grid-5 > li { 
 
    width: 20%; 
 
    padding: 0 0.625rem 1.25rem; } 
 
    .medium-block-grid-5 > li:nth-of-type(n) { 
 
     clear: none; } 
 
    .medium-block-grid-5 > li:nth-of-type(5n+1) { 
 
     clear: both; } 
 

 
    .medium-block-grid-6 > li { 
 
    width: 16.66667%; 
 
    padding: 0 0.625rem 1.25rem; } 
 
    .medium-block-grid-6 > li:nth-of-type(n) { 
 
     clear: none; } 
 
    .medium-block-grid-6 > li:nth-of-type(6n+1) { 
 
     clear: both; } 
 

 
    .medium-block-grid-7 > li { 
 
    width: 14.28571%; 
 
    padding: 0 0.625rem 1.25rem; } 
 
    .medium-block-grid-7 > li:nth-of-type(n) { 
 
     clear: none; } 
 
    .medium-block-grid-7 > li:nth-of-type(7n+1) { 
 
     clear: both; } 
 

 
    .medium-block-grid-8 > li { 
 
    width: 12.5%; 
 
    padding: 0 0.625rem 1.25rem; } 
 
    .medium-block-grid-8 > li:nth-of-type(n) { 
 
     clear: none; } 
 
    .medium-block-grid-8 > li:nth-of-type(8n+1) { 
 
     clear: both; } 
 

 
    .medium-block-grid-9 > li { 
 
    width: 11.11111%; 
 
    padding: 0 0.625rem 1.25rem; } 
 
    .medium-block-grid-9 > li:nth-of-type(n) { 
 
     clear: none; } 
 
    .medium-block-grid-9 > li:nth-of-type(9n+1) { 
 
     clear: both; } 
 

 
    .medium-block-grid-10 > li { 
 
    width: 10%; 
 
    padding: 0 0.625rem 1.25rem; } 
 
    .medium-block-grid-10 > li:nth-of-type(n) { 
 
     clear: none; } 
 
    .medium-block-grid-10 > li:nth-of-type(10n+1) { 
 
     clear: both; } 
 

 
    .medium-block-grid-11 > li { 
 
    width: 9.09091%; 
 
    padding: 0 0.625rem 1.25rem; } 
 
    .medium-block-grid-11 > li:nth-of-type(n) { 
 
     clear: none; } 
 
    .medium-block-grid-11 > li:nth-of-type(11n+1) { 
 
     clear: both; } 
 

 
    .medium-block-grid-12 > li { 
 
    width: 8.33333%; 
 
    padding: 0 0.625rem 1.25rem; } 
 
    .medium-block-grid-12 > li:nth-of-type(n) { 
 
     clear: none; } 
 
    .medium-block-grid-12 > li:nth-of-type(12n+1) { 
 
     clear: both; } } 
 
@media only screen and (min-width: 64.063em) { 
 
    .large-block-grid-1 > li { 
 
    width: 100%; 
 
    padding: 0 0.625rem 1.25rem; } 
 
    .large-block-grid-1 > li:nth-of-type(n) { 
 
     clear: none; } 
 
    .large-block-grid-1 > li:nth-of-type(1n+1) { 
 
     clear: both; } 
 

 
    .large-block-grid-2 > li { 
 
    width: 50%; 
 
    padding: 0 0.625rem 1.25rem; } 
 
    .large-block-grid-2 > li:nth-of-type(n) { 
 
     clear: none; } 
 
    .large-block-grid-2 > li:nth-of-type(2n+1) { 
 
     clear: both; } 
 

 
    .large-block-grid-3 > li { 
 
    width: 33.33333%; 
 
    padding: 0 0.625rem 1.25rem; } 
 
    .large-block-grid-3 > li:nth-of-type(n) { 
 
     clear: none; } 
 
    .large-block-grid-3 > li:nth-of-type(3n+1) { 
 
     clear: both; } 
 

 
    .large-block-grid-4 > li { 
 
    width: 25%; 
 
    padding: 0 0.625rem 1.25rem; } 
 
    .large-block-grid-4 > li:nth-of-type(n) { 
 
     clear: none; } 
 
    .large-block-grid-4 > li:nth-of-type(4n+1) { 
 
     clear: both; } 
 

 
    .large-block-grid-5 > li { 
 
    width: 20%; 
 
    padding: 0 0.625rem 1.25rem; } 
 
    .large-block-grid-5 > li:nth-of-type(n) { 
 
     clear: none; } 
 
    .large-block-grid-5 > li:nth-of-type(5n+1) { 
 
     clear: both; } 
 

 
    .large-block-grid-6 > li { 
 
    width: 16.66667%; 
 
    padding: 0 0.625rem 1.25rem; } 
 
    .large-block-grid-6 > li:nth-of-type(n) { 
 
     clear: none; } 
 
    .large-block-grid-6 > li:nth-of-type(6n+1) { 
 
     clear: both; } 
 

 
    .large-block-grid-7 > li { 
 
    width: 14.28571%; 
 
    padding: 0 0.625rem 1.25rem; } 
 
    .large-block-grid-7 > li:nth-of-type(n) { 
 
     clear: none; } 
 
    .large-block-grid-7 > li:nth-of-type(7n+1) { 
 
     clear: both; } 
 

 
    .large-block-grid-8 > li { 
 
    width: 12.5%; 
 
    padding: 0 0.625rem 1.25rem; } 
 
    .large-block-grid-8 > li:nth-of-type(n) { 
 
     clear: none; } 
 
    .large-block-grid-8 > li:nth-of-type(8n+1) { 
 
     clear: both; } 
 

 
    .large-block-grid-9 > li { 
 
    width: 11.11111%; 
 
    padding: 0 0.625rem 1.25rem; } 
 
    .large-block-grid-9 > li:nth-of-type(n) { 
 
     clear: none; } 
 
    .large-block-grid-9 > li:nth-of-type(9n+1) { 
 
     clear: both; } 
 

 
    .large-block-grid-10 > li { 
 
    width: 10%; 
 
    padding: 0 0.625rem 1.25rem; } 
 
    .large-block-grid-10 > li:nth-of-type(n) { 
 
     clear: none; } 
 
    .large-block-grid-10 > li:nth-of-type(10n+1) { 
 
     clear: both; } 
 

 
    .large-block-grid-11 > li { 
 
    width: 9.09091%; 
 
    padding: 0 0.625rem 1.25rem; } 
 
    .large-block-grid-11 > li:nth-of-type(n) { 
 
     clear: none; } 
 
    .large-block-grid-11 > li:nth-of-type(11n+1) { 
 
     clear: both; } 
 

 
    .large-block-grid-12 > li { 
 
    width: 8.33333%; 
 
    padding: 0 0.625rem 1.25rem; } 
 
    .large-block-grid-12 > li:nth-of-type(n) { 
 
     clear: none; } 
 
    .large-block-grid-12 > li:nth-of-type(12n+1) { 
 
     clear: both; } }

<ul class="small-block-grid-2 large-block-grid-4"> 
 
    <li><img src="../assets/img/examples/comet-th.jpg"></li> 
 
    <li><img src="../assets/img/examples/launch-th.jpg"></li> 
 
    <li><img src="../assets/img/examples/space-th.jpg"></li> 
 
    <li><img src="../assets/img/examples/spacewalk-th.jpg"></li> 
 
</ul>