Bootstrap - jak inteligentnie zwiększać kolumny, gdy ekran jest nieskończenie duży? - css, twitter-bootstrap, zurb-foundation

Używam poniższych klas dla dużego i bardzo dużego ekranu:

col-xl-4 col-lg-6 col-sm-12

To tworzy 3 kolumny na bardzo duży ekran, który jest świetny. Ale pierwszy problem jest, jeśli chodzi o bardzo duże ekran - będzie zawsze zostań w 3 kolumnach.

Jak zwiększyć liczby kolumn kiedy ekran staje się większy i nieskończenie duży?

Na przykład - zależy od wielkości ekranu,

col-xxl-5
col-xxxl-6
col-xxxxl-7
col-xxxxxl-8

Podczas, gdy Drugi problem jest to, że widzisz, że dodaję klasę ręcznie col-xxxxxl-8 co nie jest idealne. Czy istnieje sposób, aby to zrobić? inteligentnie?

Albo może Fundacja czy można to zrobić lepiej?

To jest cały kod nad którym pracuję.

Odpowiedzi:

Nie jestem fanem Bootstrapa, ale wiem, że Fundamenty ZURB mają możliwość zadeklarowania większych punktów przerwania (czyli zapytań medialnych), dzięki czemu możesz nadać swój kod na ekranach xxlarge. jak wspomniano tutaj: http://foundation.zurb.com/sites/docs/media-queries.html#changing-the-breakpoints

$breakpoints: (
small: 0px,
medium: 640px,
large: 1024px,
xlarge: 1200px,
xxlarge: 1440px,
);

niż, będziesz mógł użyć czegoś takiego:

<div class="row">
<div class="small-6 medium-3 xxlarge-4 columns"></div>
<div class="small-6 medium-3 xxlarge-4 columns"></div>
</div>

pamiętaj, że musisz użyć wersji fundacji SASS.