Wie erreicht man benutzerdefinierte Spaltenversätze in Bootstrap 4 Beta?

Bootstrap-Spaltenversatz funktioniert nicht: Eine Lösung

In Bootstrap 4 Beta ist der Spaltenversatz offenbar zu einem Grund zur Sorge für Entwickler geworden. Die zuvor verwendeten offset-md-*-Klassen wurden gemäß der Dokumentation entfernt. Dieses Problem wurde jedoch in Beta 2 vorübergehend behoben, wodurch die bekannten Offset-Klassen wiederhergestellt wurden.

In Beta 1 wurde jedoch ein neuartiger Ansatz zum Spalten-Offset mit der .ml-auto Klasse. Während diese Methode tatsächlich eine col-md-4-Spalte verschieben kann, bewirkt sie einen Versatz von vier Spalten. Dies ist nicht das, was die meisten Entwickler suchen; Sie benötigen benutzerdefinierte Offsets wie das frühere

.

Die Verwendung von

als Ersatz erwies sich als unwirksam. Handelt es sich also um einen Fehler oder gibt es einen praktikablen Workaround?

Glücklicherweise wurde das Problem durch die Wiederherstellung der Offset-Klassen behoben. Dennoch können die in Beta 1 eingeführten neuen automatischen Ränder weiterhin für den Spaltenversatz verwendet werden. Durch diese Ränder wird die Spalte so weit wie möglich nach rechts verschoben. Folglich hängt die Höhe der Verrechnung vom verfügbaren Platz ab. Wenn rechts von

col-md-4 keine weiteren Spalten vorhanden sind, wird die gesamte rechte Seite der Zeile eingenommen.

Alternative Lösungen

Alternativ können Sie eine Dummy-Spalte implementieren, um einen Zwei-Spalten-Offset zu erreichen:

<div class="row">
  <div class="col-md-2"></div>
  <div class="col-md-4">
    ...
  </div>
</div>Zum Zentrieren von zwei </p>
<p>col-md-4<strong>-Spalten die Kombination von </strong> ml-auto<strong> und </strong>mr-auto<strong> können verwendet werden:</strong></p>
<pre class="brush:php;toolbar:false"><div class="row">
  <div class="col-md-4 ml-auto">
    .
  </div>
  <div class="col-md-4 mr-auto">
    .
  </div>
</div>

Um schließlich eine einzelne Spalte

col-md-4 zu zentrieren, verwenden Sie einfach mx-auto für gleiche Ränder auf beiden Seiten:

<div class="row">
  <div class="col-md-4 mx-auto">
    .
  </div>
</div>

Hinweis: Die spezifischen Spaltenoffsetklassen werden in Beta 2 wieder eingeführt.

Das obige ist der detaillierte Inhalt vonWie erreicht man benutzerdefinierte Spaltenversätze in Bootstrap 4 Beta?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle：php.cn

Vorheriger Artikel：Wie kann ich Box Shadow-Kompatibilität in IE7 und IE8 erreichen? Nächster Artikel：Wie kann ich die Textfarbe basierend auf der Hintergrundhelligkeit dynamisch anpassen?

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Neueste Artikel des Autors

Aktuelle Ausgaben

function_exists() kann die benutzerdefinierte Funktion nicht ermitteln Funktionstest () {Verwendung der Verwendung durch -Durch -Durch -Durch -Durch -Durch -Durc...

Aus 2024-04-29 11:01:01

0

2

1840

So zeigen Sie die mobile Version von Google Chrome an Hallo Lehrer, wie kann ich Google Chrome in eine mobile Version umwandeln?

Aus 2024-04-23 00:22:19

0

10

2009

Das untergeordnete Fenster bedient das übergeordnete Fenster, aber die Ausgabe antwortet nicht. Die ersten beiden Sätze sind ausführbar, der letzte Satz jedoch nicht.

Aus 2024-04-19 15:37:47

0

1

1694

Im übergeordneten Fenster erfolgt keine Ausgabe document.onclick = function(){ window.opener.document.write('Ich bin die Ausgabe des unter...

Aus 2024-04-18 23:52:34

0

1

1594

Wo gibt es die Kursunterlagen zum CSS-Mindmapping? Kursunterlagen

Aus 2024-04-16 10:10:18

0

0

1612

verwandte Themen

Mehr>

• Welche Münze ist Aviv?
• Welche mobilen Betriebssysteme gibt es?
• Eine Sammlung häufig verwendeter Computerbefehle
• Was sind die Cloud-Server?
• So aktivieren Sie Computerfenster
• Die drahtlose Netzwerkkarte kann keine Verbindung herstellen
• So schließen Sie Port 445
• Verbunden, aber kein Zugriff auf das Internet möglich