Bootstrap - usuwanie wypełnienia lub marginesu, gdy rozmiar ekranu jest mniejszy

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 colorprzesłonięte na container-fluidselektorze 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-fluidlub 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?

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

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ść

1. Nigdy nie używaj .containerklasy do niczego innego niż wiersze
2. Utwórz klon .containerklasy, która nie ma dopełnienia, do użytku z html innym niż grid
3. Aby usunąć .containerdopeł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, LESSefekt 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 FrameworkGrid jako bardziej zaawansowanego

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

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

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

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

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:

1. Przetestuj swoją stronę, tymczasowo usuwając sekcje zawierające kontenery i przetestuj swoją witrynę w małych przeglądarkach. Pozwoli to zidentyfikować problematyczny kontener.

2. Możesz mieć problem z formatowaniem div. Jeśli tak, napraw to. Jeśli wszystko jest w porządku, to:

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

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;

}

.container-fluid {
    margin-right: auto;
    margin-left: auto;
    padding-left:0px;
    padding-right:0px;
}

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

Innym css, który może powodować problem z marginesem, jest to, że masz direction:someValuew 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;
    }
}

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