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

87

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?

Seong Lee
quelle
1
Tatsächlich wird die Polsterung dem Körper hinzugefügt.
Mister Smith

Antworten:

115

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

Zim
quelle
4
Ja! endlich gefunden, was dieses Verhalten festlegt. Sie haben mein Problem auf den Punkt gebracht. Vielen Dank.
Seong Lee
Danke für den nützlichen Tipp. Funktioniert gut für mich.
Sedat Kumcu
Dies ist sehr nützlich und arbeitet für Bootstrap. Danke
Faisal
Wie ist die maximale Breite für geöffnete Navigationsleisten?
Faisal
Vielleicht hatte ich ein ähnliches Problem, aber es hing mit dem Auffüllen zwischen dem Körper und der eigentlichen .container-Klasse zusammen. Der Container war für den Iphone 5-Bildschirm sehr klein, Abstandshilfsmittel haben mir überhaupt nicht geholfen. Stattdessen bearbeite ich den Körperstil direkt und ändere die Polsterung von 50px auf 15px. Jetzt haben wir viel mehr Platz auf dem Bildschirm.
Paulo Henrique
19

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

Zyad Sherif
quelle
Dies funktioniert immer noch für Bootstrap 4, wenn Sie es aus irgendeinem Grund nicht px-sm-0für Spalten verwenden möchten .
Sebastian Thomas
8

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;
  }
}
Mike Dorsey
quelle
7

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;}
}
WARTUNG
quelle
1
Entschuldigung ... es überschreibt die Polsterung für diese Angelegenheit nicht einfach durch Hinzufügen eines Selektors ...
Seong Lee
1
@tassoevan Ich fürchte, ich wusste bereits, ob 000px mit 0 identisch ist und das Ändern von 000px auf 0 das Problem nicht löst. Außerdem weiß ich nicht, ob es eine gute Idee ist, eine Breite auf einen Pixelwert von sogar 0 zu setzen. Es hat etwas mit Rand oder Polsterung zu tun, denke ich.
Seong Lee
1
"000" war nur ein Beispiel. Sie sollten #your_id {margin: 5px; padding: 0px;} anstelle von #your_id {width: 000px; height: 000px;}
WaPaRtY
2
Versuche immer den richtigen Code zu schreiben! Anfänger finden es vielleicht verwirrend! :)
Mackelito
3

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;
}
Dan Gayle
quelle
2

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;
    }
}
MastaBaba
quelle
1
unterschätzte Antwort, dies half mir, eine horizontale Bildlaufleiste auf dem Handy loszuwerden
William Randokun
1

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;}
}
Kim McCann
quelle
1

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;

}}

Swagatam Majumdar
quelle
0
.container-fluid {
    margin-right: auto;
    margin-left: auto;
    padding-left:0px;
    padding-right:0px;
}
Indrajeet Yadav
quelle
Aus Review Que: Könnten Sie das näher erläutern?
Rahul
0

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

Ryan NZ
quelle
0

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;
    }
}
Richard Socker
quelle