Domyślnie wiersze w Zurb Foundation 4 i 5 są uruchamiane z maksymalną szerokością 1000 pikseli, nawet na bardzo dużych monitorach, co tworzy marginesy po obu stronach zawartości. Jak sprawić, aby był uruchamiany na pełnym ekranie bez wpływania na reakcję projektu?Jak tworzyć wiersze na pełnym ekranie Zurb Foundation 4/5?
Dodaj następujący kod do pliku CSS:
Nie podoba mi się to, ponieważ sprawia, że cała strona jest w 100%. Zobacz mój przykład poniżej, jeśli chcesz tylko utworzyć stopkę lub nagłówek w 100%. – Tom
Cóż, tak, oczywiście; ale to nie jest oryginalne pytanie. Twoja jest idealnie poprawną odpowiedzią na pytanie, które stawiasz w komentarzach. – BFWebAdmin
@BFDatabaseAdmin przy użyciu! Important jest dobrym sposobem na zrujnowanie arkuszy stylów. Żadne .row.narrow nie będzie w stanie ustawić min-width: 50%, ponieważ ktoś na wątku komentarza stackoverflow ma zaakceptowaną odpowiedź, która mówi, że podstawowy styl .row powinien mieć! Ważny znacznik, aby nadpisać domyślną min-szerokość w wierszu ... – Lotus
Jeśli używasz Sass/Kompas, z zurb-foundation gem lub niestandardowy rozkład Foundation, można ustawić zmienną $row-width. Przepłynie to przez inne miejsca, w których jest używane. Możesz także dostosować, na przykład, liczbę kolumn, szerokość marginesu i tak dalej.
Dno dokumentacji siatki wyjaśnia więcej: http://foundation.zurb.com/docs/components/grid.html
Myślę, że najlepszym sposobem, aby to zrobić, to tak.
Dodaj to do swojego CSS lub zwyczaju css-
.row.full-width {
width: 100%;
max-width: 100%;
}
Następnie w html, zrobić this-
<div class="row full-width"> </div>
Pozwoli to utrzymać system siatki w takt w przypadku chcesz tylko użyć pełnego ekranu dla nagłówka lub stopki.
<div class="row">
<div class="large-6 columns"></div>
<div class="large-6 columns"></div>
</div>
to da szerokość 1000px
<div class="large-6 columns"></div>
<div class="large-6 columns"></div>
ale jeśli użyć klasy kolumny bez klasy wierszach dostaniesz fullscreen ...
Brak dodawania wierszy traci fundamentalną strukturę Zurb. – BFWebAdmin
Zaakceptowanych odpowiedź got me zaczął jednak Musiałem użyć tego: body, html, .row {margin: 0px; szerokość: 100%! ważne; min-width: 100%! important; } –