So brechen Sie die Bootstrap-Anpassung ab

So brechen Sie die Bootstrap-Anpassung ab: 1. Entfernen Sie den Header „";

Die Betriebsumgebung dieses Tutorials: Windows10-System, Bootstrap3.0. Dieser Artikel gilt für alle Computermarken.

Empfohlen: „Bootstrap-Video-Tutorial“

Bootstrap-Responsive-Lösung deaktivieren

Ich habe vor ein paar Tagen den Auftrag erhalten, mehrere statische Seiten mit dem Bootstrap-Framework zu schreiben Zeit, es hat 3 Tage gedauert, bis ich die Seite endlich fertig hatte. Ich habe sie hin und her überarbeitet und über die Probleme gesprochen, auf die ich gestoßen bin.

Nachdem er Bootstrap zum Erstellen der Seite verwendet hatte, änderte der Teamleiter seine Meinung und sagte, dass Bootstrap nicht verwendet werden sollte oder dass die Reaktionsfähigkeit von Bootstrap deaktiviert werden sollte, was dauern würde Gehen Sie zur offiziellen Bootstrap-Website und deaktivieren Sie sie zunächst: Entfernen Sie den Header . Zweitens: Legen Sie die .container-Breite fest, z. B.:

container{
width: 1170px;
max-width: none !important;
}

Drittens: Verwenden Sie den Stil .col-xs- (minimale Gerätegitterklasse), um .col-md- und .col-lg-* zu ersetzen.

Allerdings endet das Problem zu diesem Zeitpunkt noch nicht.

Geben Sie dem Container nun eine feste Breite mit einem weißen Hintergrund, der den Browser ausfüllen kann. Da der Bildschirm jedoch kleiner wird, kann der weiße Hintergrund der Navigationsleiste danach nicht mehr die Breite des Browsers ausfüllen kleiner! Außerdem muss mein Karussellbild die Breite des Browsers ausfüllen, und jetzt wird es in der Mitte angezeigt. Wenn ich es besser gewusst hätte, hätte ich die Seite nicht neu schreiben müssen Jetzt? Ich habe online nachgesehen, konnte aber keine Lösung finden. Später kam mir die Idee, dem Text eine Breite zu geben oder die gleiche Breite für die Navigationsleiste und das Karussell festzulegen ? Habe herausgefunden, dass das nicht geht!

Als ich den Code mit Firefox debuggte, entdeckte ich zufällig diese gute Sache, aber ich habe sie selbst eingerichtet und sie reagierte nicht. Schließlich war ich sprachlos Es dauerte eine Weile, bis ich herausfand, dass dieser Stil nicht funktionierte. Schreiben Sie es richtig.

Der vierte Punkt zur Lösung des Problems der Reaktionsfähigkeit der Navigationsleiste und des Karussells lautet also:

@media screen and (max-width: 1400px) {
body{
width: 1400px;
}
}

Was er meint, ist, dass Leser, die es nicht wissen, die Körperbreite auf 1400 Pixel einstellen können Online. Schauen Sie, das ist eine gute Sache!

Schließlich bezieht sich „oben“ auf „oben“, wenn die Position absolut positioniert ist. Das Festlegen der Breite und Höhe von span hat keine Auswirkung. Es handelt sich nicht um ein Element auf Blockebene, div ist ein Element auf Blockebene und span ist ein Inline-Element. Wenn Sie span verwenden möchten, um die Schaltfläche im Bild unten zu implementieren, müssen Sie nur den Abstand nach Bedarf festlegen. (Padding: 20px 20px usw.)

Da ich kein Front-End-Mensch bin, bin ich mit diesen Stilen nicht sehr vertraut. Wenn Sie sie nicht mögen, sprühen Sie sie nicht.

Das obige ist der detaillierte Inhalt vonSo brechen Sie die Bootstrap-Anpassung ab. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!