In einer kürzlich durchgeführten Projektanlage werden Bootstrap.css + AngularJS verwendet, und der Hintergrund verarbeitet nur Daten (unter Verwendung von PHP ist das Verarbeitungsergebnis direkt json_encode ($ arr), was sehr cool ist). Die Simulationsmaschinen -Tests auf Chrom waren perfekt und es gibt keinen wirklichen Maschinentest. Nachdem ich es abgeschlossen hatte, war ich fassungslos, als ich telefonierte. Als ich die Seite nach links und rechts durchschlug, wurde eine leere vertikale Balken angezeigt (wie in der Abbildung unten gezeigt). Es wird festgestellt, dass es auf die Länge zurückzuführen ist, die durch Randrechte eingestellt ist. Überprüfen Sie CSS und es gibt keinen relevanten Code. Es scheint, dass das Problem in Bootstrap auftritt. Obwohl es sich nicht auf die Verwendung des Programms auswirkt, fühlt es sich sehr umständlich an und Sie müssen es beheben.
Überprüfen Sie die Seite und stellen Sie fest, dass dieses Problem nur auftritt, wenn die Seite mit dem Gittersystem verwendet wird. Überprüfen Sie das .Row-bezogene CSS und stellen Sie fest, dass seine Margendefinition wie folgt lautet:
.Row {Margin-Links: -15px; Margin-Right: -15px;}.Row wird im Allgemeinen als unteres Element des Behälters und als oberes Element von .col-xx-xx verwendet. Schauen Sie sich übrigens die CSS von .Container und Con-XX-XX an:
.Container {padding-linft: 15px; padding-right: 15px;}.Die inneren Ränder aller Elemente von .Container haben einen Abstand von 15px, der sehr schön aussieht, und die inneren Ränder von .Col-XX-XX legt ebenfalls 15px fest. Dies wird nicht auf die Elemente des .Contariner ausgerichtet (der Abstand zwischen .col-xx-xx und .Container beträgt 30px), daher muss das erste Rasterelement und das letzte Rasterelement auf {padding-links: 0px;} und {Padding-Right: 0px;} eingestellt werden. Dies löst das Ausrichtungsproblem, aber nach der Einstellung beträgt die Breite jedes Gitters die Breite des angezeigten Inhalts 15px. Die Genies von FB übernahmen also geschickt die Lösung negativer äußerer Grenzen. Die Code -Implementierung war nicht nur einfach, es gab auch kein Problem der inkonsistenten Breite des in jedem Raster angezeigten Inhalt.
Obwohl die Lösung negativer äußerer Grenzen gut ist, wird sie auf kleinen Bildschirmen (mobile Terminals) leere Grenzen (der Schmerzpunkt in diesem Artikel) verursachen. Das Anpassen von Bootstrap löst dieses Problem, aber es ist zu problematisch. Am einfachsten ist es, die relevanten CSS umzuschreiben.
/* Muss anrufen* //* ficken 15px für das iPhone Start nach bootstrap.css */. Row {Margin: 0;}. .Col-lg-9, .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,. 9. xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-XS-7, .Col-XS-8,. Fick 15px für iPhone über */Es wurde erfolgreich gelöst, weil das Gitter keine Polsterung hat, die Breite jedes Zauns gleich, die Breite des angezeigten Inhalts ist ebenfalls gleich und kann mit den Elementen des Containers ausgerichtet werden (Hinweis: Diese Folge ist auch sehr schwerwiegend, dh der Inhalt jedes Rasters ist verbunden, und das interne Raster kann durch Neudefinition des Inhalts und Zentrums des Inhalts gelöst werden).
Die oben genannten sind die Gründe und Lösungen für den leeren Speicherplatz rechts, wenn Bootstrap.css auf das Mobiltelefon aufgenommen wird. Ich hoffe, es wird für alle hilfreich sein!