Bootstrap - Entfernen von Polstern oder Rändern, wenn die Bildschirmgröße kleiner ist

EDITED: Vielleicht sollte ich fragen, welcher Selektor die Seitenpolsterung einrichtet, wenn der Bildschirm auf unter 480px Breite reduziert wird? Ich habe eine Weile in bootstrap-responsiveness.css gesucht, um dies zu finden, aber nichts scheint dies zu beeinflussen.

Original Ich möchte grundsätzlich alle Standardauffüllungen oder Ränder entfernen, die für die Reaktionsfähigkeit auf kleineren Gerätebildschirmen festgelegt wurden.

Ich habe einen background colorüberschriebenen container-fluidSelektor und für größere Bildschirme werden sie zu 100% über die Breite perfekt gerendert, aber der Bildschirm wird auf kleinere Größen reduziert. Standardmäßig scheint Bootstrap einen Rand oder eine Auffüllung auf container-fluidoder hinzuzufügen container.

<div class="container-fluid">
    <div class="row-fluid">
      test
    </div>
</div>

Wenn ich benutzerdefiniertes CSS verwende, um den Standardstil von Bootstrap zu überschreiben, welche Medienabfrage oder Auswahl sollte ich überschreiben, um diese Auffüllung auf kleineren Bildschirmen zu entfernen?

Die @ media-Abfrage speziell für 'Telefone' lautet ..

@media (max-width: 480px) { ... }

Möglicherweise möchten Sie jedoch die Auffüllung / den Rand für kleinere Bildschirmgrößen entfernen. Standardmäßig passt Bootstrap die Ränder / Auffüllungen an den Körper, den Container und die Navigationsleisten mit 978 Pixel an.

Hier sind einige Fragen, die (in den meisten Fällen) für mich funktioniert haben:

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

Demo

Update für Bootstrap 4

Verwenden Sie die neuen Dienstprogramme für reaktionsschnelle Abstände, mit denen Sie Auffüllungen / Ränder für verschiedene Bildschirmbreiten (Haltepunkte) festlegen können: https://stackoverflow.com/a/43208888/171456

Das Problem ist hier viel komplexer als das Entfernen der Containerauffüllung, da die Gitterstruktur auf dieser Auffüllung beruht, wenn negative Ränder für die eingeschlossenen Zeilen angewendet werden.

Das Entfernen der Containerauffüllung führt in diesem Fall zu einem Überlauf der x-Achse, der durch alle Zeilen innerhalb dieser Containerklasse verursacht wird. Dies ist eines der dümmsten Dinge am Bootstrap-Raster.

Logischerweise sollte es von angefahren werden

1. Verwenden Sie die .containerKlasse niemals für etwas anderes als Zeilen
2. Erstellen Sie einen Klon der .containerKlasse ohne Auffüllung für die Verwendung mit Nicht-Grid-HTML
3. Um das .containerPadding auf Mobilgeräten zu entfernen, können Sie es dann manuell mit Medienabfragen entfernen, overflow-x: hidden;was nicht sehr zuverlässig ist, aber in den meisten Fällen funktioniert.

Wenn Sie LESSdas Endergebnis verwenden, sieht es so aus

@media (max-width: @screen-md-max) {
    .container{
        padding: 0;
        overflow-x: hidden;
    }
}

Ändern Sie die Medienabfrage auf die gewünschte Größe.

Abschließende Gedanken, ich würde wärmstens empfehlen, das Foundation FrameworkGrid als fortgeschritteneren Weg zu verwenden

Dieser Thread war hilfreich, um die Lösung in meinem speziellen Fall zu finden (Bootstrap 3).

@media (max-width: 767px) {
  .container-fluid, .row {
    padding:0px;
  }
  .navbar-header {
    margin:0px;
  }
}

Um solche Probleme zu lösen, verwende ich CSS - die schnellste und einfachste Art, wie ich denke ... Ändern Sie es einfach nach Ihren Bedürfnissen ...

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

Die Art und Weise, wie ich ein Element auf 100% Breite des Geräts bringe, besteht darin, negative linke und rechte Ränder zu verwenden. Der Körper hat eine Polsterung von 24px, daher können Sie negative Ränder verwenden für:

element{
    margin-left:  -24px;
    margin-right: -24px;
    padding-left:  24px;
    padding-right:  24px;
}

In Bootstrap 4 wird der 15-Pixel-Rand des ursprünglichen Containers auf alle Zeilen und Spalten reduziert. So etwas funktioniert bei mir ...

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

Ich habe dieses Problem auf Websites auftreten lassen, die ähnliche Formatierungen und Codes verwendet haben, und ich habe mir Gedanken darüber gemacht, was das fehlende Detail war, das einige meiner Websites zum Funktionieren gebracht hat, andere nicht.

Für Bootstrap 3: Die Antwort für mich war nicht das Umschreiben von CSS für .container-fluid, .row oder das Zurücksetzen von Rändern. Das konsistente Muster, das ich erkannte, war die Länge längerer Wörter, die das Design abwarfen und Ränder erzeugten .

Die Lösungsschritte:

1. Testen Sie Ihre Seite, indem Sie vorübergehend Abschnitte löschen, die Container enthalten, und testen Sie Ihre Website in kleinen Browsern. Dadurch wird Ihr Problemcontainer identifiziert.

2. Möglicherweise liegt ein Div-Formatierungsproblem vor. Wenn Sie dies tun, beheben Sie es. Wenn alles in Ordnung ist, dann:

3. Stellen Sie fest, ob Sie lange Wörter verwendet haben, die nicht umbrochen werden. Wenn Sie das Wort nicht ändern können (z. B. für Tag-Zeilen oder Slogans usw.)

Lösung 1: Formatieren Sie die Schriftart in Ihrer Medienabfrage für einen kleineren Bildschirm auf eine kleinere Größe (normalerweise finde ich @media (maximale Breite: 767px) ausreichend).

ODER:

Lösung 2:

@media (max-width: 767px){

h1, h2, h3 {word-wrap: break-word;}
}

Das CSS von Paulius Marčiukaitis hat für mein Genesis-Thema gut funktioniert. So habe ich es für meine Anforderungen weiter modifiziert:

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

Hier ist, was ich für Bootstrap 3/4 mache

Verwenden Sie Behälterflüssigkeit anstelle von Behälter.

Fügen Sie dies meinem CSS hinzu

@media (min-width: 1400px) {
    .container-fluid{
        max-width: 1400px;
    }   
}

Dadurch werden Ränder unterhalb des Bildschirms mit einer Breite von 1400 Pixel entfernt

Ein weiteres CSS, das das Randproblem verursachen kann, ist das, das Sie direction:someValuein Ihrem CSS haben. Entfernen Sie es einfach, indem Sie es auf initial setzen.

Beispielsweise:

body {
     direction:rtl;
 }
@media (max-width: 480px) {
    body {
     direction:initial;
    }
}