EDYTOWANO: Może powinienem zapytać, który selektor ustawia dopełnienie boczne, gdy ekran jest zmniejszony do szerokości poniżej 480 pikseli? Przez jakiś czas przeglądałem bootstrap-responsiveness.css, aby to zlokalizować, ale wydaje się, że nic nie ma na to wpływu.
Oryginał Zasadniczo chcę usunąć wszelkie domyślne wypełnienia lub marginesy ustawione dla responsywności na mniejszych ekranach urządzeń.
Mam background color
przesłonięte na container-fluid
selektorze i dla większego ekranu renderują idealnie 100% na szerokości, ale ekran jest zmniejszany do mniejszych rozmiarów, domyślnie Bootstrap wydaje się dodawać margines lub dopełnienie na container-fluid
lub container
.
<div class="container-fluid">
<div class="row-fluid">
test
</div>
</div>
Jeśli użyję niestandardowego css do nadpisania domyślnego stylu Bootstrap, jakie zapytanie o media lub selektor powinienem nadpisać, aby usunąć to wypełnienie na mniejszych ekranach?
źródło
Odpowiedzi:
Zapytanie @media dotyczące „telefonów” to ...
@media (max-width: 480px) { ... }
Ale możesz chcieć usunąć dopełnienie / marginesy dla mniejszych rozmiarów ekranu. Domyślnie Bootstrap dostosowuje marginesy / dopełnienie do treści, kontenera i pasków nawigacyjnych na 978px.
Oto kilka zapytań, które zadziałały (w większości przypadków) dla mnie:
@media (max-width: 978px) { .container { padding:0; margin:0; } body { padding:0; } .navbar-fixed-top, .navbar-fixed-bottom, .navbar-static-top { margin-left: 0; margin-right: 0; margin-bottom:0; } }
Próbny
Aktualizacja dla Bootstrap 4
Skorzystaj z nowych narzędzi do responsywnych odstępów, które pozwalają ustawić dopełnienie / marginesy dla różnych szerokości ekranu (punkty przerwania): https://stackoverflow.com/a/43208888/171456
źródło
Tutaj problem jest znacznie bardziej złożony niż usunięcie wypełnienia pojemnika, ponieważ struktura siatki opiera się na tym wypełnieniu podczas stosowania ujemnych marginesów dla zamkniętych rzędów.
Usunięcie wypełnienia kontenera w tym przypadku spowoduje przepełnienie osi X spowodowane przez wszystkie wiersze wewnątrz tej klasy kontenera, jest to jedna z najgłupszych rzeczy w siatce Bootstrap.
Logicznie rzecz biorąc, należy do tego podejść
.container
klasy do niczego innego niż wiersze.container
klasy, która nie ma dopełnienia, do użytku z html innym niż grid.container
dopełnienie na telefonie komórkowym, możesz usunąć je ręcznie za pomocą zapytań o media,overflow-x: hidden;
co nie jest zbyt niezawodne, ale działa w większości przypadków.Jeśli używasz,
LESS
efekt końcowy będzie wyglądał tak@media (max-width: @screen-md-max) { .container{ padding: 0; overflow-x: hidden; } }
Zmień zapytanie o media na dowolny rozmiar, na który chcesz kierować.
Ostatnie przemyślenia, gorąco polecam korzystanie z
Foundation Framework
Grid jako bardziej zaawansowanegoźródło
px-sm-0
na kolumnach.Ten wątek był pomocny w znalezieniu rozwiązania w moim konkretnym przypadku (bootstrap 3)
@media (max-width: 767px) { .container-fluid, .row { padding:0px; } .navbar-header { margin:0px; } }
źródło
Aby rozwiązać takie problemy, używam CSS - myślę, że najszybszy i najprostszy sposób ... Po prostu zmodyfikuj go według swoich potrzeb ...
@media only screen and (max-width: 480px) { #your_id {width:000px;height:000px;} } @media only screen and (min-width: 480px) and (max-width: 768px) { #your_id {width:000px;height:000px;} } @media only screen and (min-width: 768px) and (max-width: 959px) { #your_id {width:000px;height:000px;} } @media only screen and (min-width: 959px) { #your_id {width:000px;height:000px;} }
źródło
Sposób, w jaki element przechodzi przez 100% szerokości urządzenia, polega na użyciu na nim ujemnych lewego i prawego marginesu. Treść ma wypełnienie 24 piks., Więc do tego możesz użyć ujemnych marginesów dla:
element{ margin-left: -24px; margin-right: -24px; padding-left: 24px; padding-right: 24px; }
źródło
W Bootstrap 4 margines 15 pikseli, który ma początkowy kontener, jest kaskadowany do wszystkich wierszy i kolumn. Więc coś takiego działa dla mnie ...
@media (max-width: 576px) { .container-fluid { padding-left: 5px; padding-right: 5px; } .row { margin-left: -5px; margin-right: -5px; } .col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto { padding-left: 5px; padding-right: 5px; } .row.no-gutters { margin-left: 0; margin-right: 0; } }
źródło
Ten problem występował w witrynach, które korzystały z podobnego formatowania i kodu, i zastanawiałem się nad brakującymi szczegółami, które sprawiały, że niektóre z moich witryn działały, a inne nie.
W przypadku Bootstrap 3: odpowiedzią dla mnie nie było przepisanie css dla .container-fluid, .row lub resetowanie marginesów, spójny wzorzec, który zdałem sobie sprawę, to długość dłuższych słów , które zrzucały projekt i tworzyły marginesy .
Kroki rozwiązania:
Przetestuj swoją stronę, tymczasowo usuwając sekcje zawierające kontenery i przetestuj swoją witrynę w małych przeglądarkach. Pozwoli to zidentyfikować problematyczny kontener.
Możesz mieć problem z formatowaniem div. Jeśli tak, napraw to. Jeśli wszystko jest w porządku, to:
Sprawdź, czy użyłeś długich słów, które nie są zawijane. Jeśli nie możesz zmienić słowa (np. W przypadku sloganów lub sloganów itp.)
Rozwiązanie 1: Sformatuj czcionkę do mniejszego rozmiaru w zapytaniu o media, aby uzyskać mniejszy ekran (zwykle uważam, że @media (max-width: 767px) jest wystarczająca).
LUB:
Rozwiązanie 2:
@media (max-width: 767px){ h1, h2, h3 {word-wrap: break-word;} }
źródło
CSS autorstwa Pauliusa Marčiukaitisa dobrze działał w przypadku mojego motywu Genesis, oto jak go zmodyfikowałem pod kątem moich wymagań:
@media only screen and (max-width: 480px) { .entry { background-color: #fff; margin-bottom: 0; padding: 10px 8px;
}
źródło
.container-fluid { margin-right: auto; margin-left: auto; padding-left:0px; padding-right:0px; }
źródło
Oto, co robię dla Bootstrap 3/4
Użyj pojemnika-płynu zamiast pojemnika.
Dodaj to do mojego CSS
@media (min-width: 1400px) { .container-fluid{ max-width: 1400px; } }
Spowoduje to usunięcie marginesów poniżej ekranu o szerokości 1400 pikseli
źródło
Innym css, który może powodować problem z marginesem, jest to, że masz
direction:someValue
w swoim css, więc po prostu usuń go, ustawiając go na początkowy.Na przykład:
body { direction:rtl; } @media (max-width: 480px) { body { direction:initial; } }
źródło
Prostym rozwiązaniem jest napisanie czegoś takiego,
px-lg-1
mb-lg-5
Dodając lg, klasa będzie stosowana tylko na dużych ekranach
źródło