it-swarm.com.de

Bootstrap - Entfernen der Auffüllung oder des Randes bei kleinerer Bildschirmgröße

BEARBEITET: Vielleicht sollte ich fragen, welcher Wähler die Seitenauffüllung einstellt, wenn der Bildschirm auf unter 480px Breite reduziert wird? Ich habe in bootstrap-responsiveness.css eine Weile gesucht, um das zu finden, aber nichts scheint dies zu beeinflussen. 

Original Ich möchte grundsätzlich alle Standardauffüllungen oder Randbereiche entfernen, die für das Reaktionsverhalten auf kleineren Geräteanzeigen festgelegt wurden.

Ich habe einen background color, der auf container-fluid-Auswahlbereich überschrieben wird, und für einen größeren Bildschirm wird der Wert 100% über die gesamte Breite wiedergegeben, aber der Bildschirm wird auf kleinere Größen reduziert. Standardmäßig scheint Bootstrap einen Rand oder eine Auffüllung aufcontainer-fluid oder container hinzuzufügen.

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

Wenn ich benutzerdefinierte Standardcss zum Überschreiben des Standardstils von Bootstrap verwende, welche Medienabfrage oder -auswahl sollte ich überschreiben, um diese Auffüllung auf kleineren Bildschirmen zu entfernen?

67
Seong Lee

Die @media-Abfrage speziell für "Handys" lautet ..

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

Sie können jedoch die Auffüllung/den Rand für kleinere Bildschirmgrößen entfernen. Standardmäßig passt Bootstrap die Ränder/Polsterung an Körper, Container und Navigationsleisten bei 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 das neue responsive Abstands-Dienstprogramm , mit dem Sie die Auffüllung/Ränder für verschiedene Bildschirmbreiten (Haltepunkte) einstellen können: https://stackoverflow.com/a/43208888/171456

84
Zim

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

Das Entfernen der Containerfüllung in diesem Fall führt zu einem Überlauf der X-Achse, der durch alle Zeilen in dieser Containerklasse verursacht wird. Dies ist eines der dümmsten Dinge im Bootstrap-Grid.

Logisch sollte es von angefahren werden 

  1. Verwenden Sie die .container-Klasse niemals für andere als Zeilen
  2. Erstellen Sie einen Klon der Klasse .container, der keine Auffüllung für die Verwendung von Nicht-Raster-HTML enthält
  3. Um das .container-Padding auf dem Handy zu entfernen, können Sie es manuell mit Medienabfragen entfernen, dann mit overflow-x: hidden;, was nicht sehr zuverlässig ist, aber in den meisten Fällen funktioniert.

Wenn Sie LESS verwenden, sieht das Endergebnis so aus

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

Ändern Sie die Medienabfrage in der gewünschten Größe.

Abschließende Gedanken, ich würde die Verwendung des Foundation Framework Grids als fortgeschrittenen Weg empfehlen

17
Zyad Sherif

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

Um Probleme wie dieses zu lösen, verwende ich CSS - die schnellste und einfachste Methode, die ich denke ... Modifiziere es einfach nach deinen 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 für die Breite von 100% des Geräts bekomme, besteht aus negativen linken und rechten Rändern. Der Körper ist mit 24px aufgefüllt, daher können Sie negative Ränder für Folgendes verwenden:

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

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

@media only screen and (max-width: 480px) {
.entry {
background-color: #fff;
margin-bottom: 0;
padding: 10px 8px;

}

1

Ich hatte dieses Problem auf Websites, die ähnliche Formatierungen und ähnlichen Code verwendeten, und habe mein Gehirn über die fehlenden Details beunruhigt, die dazu geführt haben, dass einige meiner Websites funktionierten, 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 haben das Design abgeworfen und Ränder geschaffen.

Die Lösungsschritte:

  1. Testen Sie Ihre Seite, indem Sie vorübergehend Abschnitte löschen, die Container enthalten, und testen Sie Ihre Site 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 sind. Wenn Sie das Wort nicht ändern können (wie bei Tag-Zeilen oder Slogans usw.)

Lösung 1: Formatieren Sie die Schrift in Ihrer Medienabfrage für einen kleineren Bildschirm auf eine kleinere Größe (ich finde normalerweise, dass @media (max-width: 767px) ausreichend ist).

ODER:

Lösung 2:

@media (max-width: 767px){

h1, h2, h3 {Word-wrap: break-Word;}
}
1
Kim McCann
.container-fluid {
    margin-right: auto;
    margin-left: auto;
    padding-left:0px;
    padding-right:0px;
}
0
Indrajeet Yadav

Eine weitere CSS, die das Randproblem verursachen kann, ist, dass Sie direction:someValue in Ihrer CSS haben. Entfernen Sie es einfach, indem Sie es auf initial setzen. 

Zum Beispiel:

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

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

Dies entfernt Ränder unter 1400px Bildschirmbreite

0
Ryan NZ