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

89

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?

Seong Lee
źródło
1
Właściwie wyściółka jest dodana do ciała.
Mister Smith

Odpowiedzi:

116

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

Zim
źródło
4
Tak! ostatecznie zlokalizował, co określa to zachowanie. Zauważyłeś mój problem. Dziękuję bardzo.
Seong Lee
Dzięki za przydatną wskazówkę. U mnie działa dobrze.
Sedat Kumcu
jest to bardzo przydatne i działa na bootstrap .. dziękuję
Faisal
jaka jest maksymalna szerokość otwartego paska nawigacyjnego?
Faisal
Może miałem podobny problem, ale był związany z wypełnieniem między treścią a rzeczywistą klasą .container. Kontener był naprawdę mały dla ekranu Iphone 5, narzędzia do rozmieszczania nie pomogły mi w ogóle, zamiast tego edytuję bezpośrednio styl ciała, zmieniając wypełnienie z 50 pikseli na 15 pikseli, teraz mamy znacznie więcej miejsca na ekranie.
Paulo Henrique
20

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

Zyad Sherif
źródło
To nadal działa dla Bootstrap 4, jeśli z jakiegoś powodu nie chcesz używać px-sm-0na kolumnach.
Sebastian Thomas
8

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;
  }
}
Mike Dorsey
źródło
7

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;}
}
WaPaRtY
źródło
1
przepraszam… to nie zastępuje wypełnienia w tej sprawie, po prostu dodając selektor ...
Seong Lee
1
@tassoevan Obawiam się, że już wiedziałem, czy 000px to to samo, co 0, a zmiana 000px na 0 nie rozwiąże problemu, a ponadto nie wiem, czy warto ustawić szerokość na wartość piksela nawet na 0. Myślę, że ma to coś wspólnego z marginesami lub dopełnieniem.
Seong Lee
1
„000” to tylko przykład. Powinieneś wpisać #your_id {margin: 5px; padding: 0px;} zamiast #your_id {width: 000px; height: 000px;}
WaPaRtY
2
Staraj się zawsze pisać poprawny kod! Początkujący mogą uznać to za mylące! :)
Mackelito
3

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;
}
Dan Gayle
źródło
2

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;
    }
}
MastaBaba
źródło
1
niedoceniana odpowiedź, pomogło mi to pozbyć się poziomego paska przewijania na telefonie komórkowym
William Randokun
1

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;}
}
Kim McCann
źródło
1

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;

}

Swagatam Majumdar
źródło
0
.container-fluid {
    margin-right: auto;
    margin-left: auto;
    padding-left:0px;
    padding-right:0px;
}
Indrajeet Yadav
źródło
Z recenzji Que: Czy mógłbyś rozwinąć.
Rahul
0

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

Ryan NZ
źródło
0

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;
    }
}
Richard Socker
źródło
0

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

Abdelsalam Megahed
źródło