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-fluid
Selektor 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-fluid
oder 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?
quelle
Antworten:
Die @ media-Abfrage speziell für 'Telefone' lautet ..
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:
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
quelle
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
.container
Klasse niemals für etwas anderes als Zeilen.container
Klasse ohne Auffüllung für die Verwendung mit Nicht-Grid-HTML.container
Padding 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
LESS
das Endergebnis verwenden, sieht es so ausÄndern Sie die Medienabfrage auf die gewünschte Größe.
Abschließende Gedanken, ich würde wärmstens empfehlen, das
Foundation Framework
Grid als fortgeschritteneren Weg zu verwendenquelle
px-sm-0
für Spalten verwenden möchten .Dieser Thread war hilfreich, um die Lösung in meinem speziellen Fall zu finden (Bootstrap 3).
quelle
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 ...
quelle
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:
quelle
In Bootstrap 4 wird der 15-Pixel-Rand des ursprünglichen Containers auf alle Zeilen und Spalten reduziert. So etwas funktioniert bei mir ...
quelle
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:
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.
Möglicherweise liegt ein Div-Formatierungsproblem vor. Wenn Sie dies tun, beheben Sie es. Wenn alles in Ordnung ist, dann:
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:
quelle
Das CSS von Paulius Marčiukaitis hat für mein Genesis-Thema gut funktioniert. So habe ich es für meine Anforderungen weiter modifiziert:
}}
quelle
quelle
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
Dadurch werden Ränder unterhalb des Bildschirms mit einer Breite von 1400 Pixel entfernt
quelle
Ein weiteres CSS, das das Randproblem verursachen kann, ist das, das Sie
direction:someValue
in Ihrem CSS haben. Entfernen Sie es einfach, indem Sie es auf initial setzen.Beispielsweise:
quelle