Wie füge ich Zeilen in Twitter Bootstrap einen oberen Rand hinzu, ohne die Klasse „row' zu ändern?

Oberen Rand zu Zeilen in Twitter Bootstrap hinzufügen

Das Twitter Bootstrap-Framework bietet eine praktische Möglichkeit, responsive Layouts zu erstellen. Es kann jedoch vorkommen, dass Sie einem Zeilenelement einen zusätzlichen oberen Rand hinzufügen müssen. Obwohl es verlockend ist, die vorhandene „row“-Klasse zu ändern, wird dies nicht empfohlen, da dies zu Konflikten mit dem Kernstil des Frameworks führen kann.

Lösung:

Anstatt zu ändern Erstellen Sie für die Klasse „row“ eine neue Klasse namens „top-buffer“, die den gewünschten Rand hinzufügt. So geht's:

1. Fügen Sie in Ihrer CSS-Datei den folgenden Code hinzu:

<code class="css">.top-buffer { margin-top: 20px; }</code>

2. Wenden Sie die Klasse „top-buffer“ auf an Zeilenelemente, bei denen Sie einen oberen Rand hinzufügen möchten:

<code class="html"><div class="row top-buffer">
    ...
</div></code>

Durch die Erstellung einer separaten Klasse können Sie auf bestimmte Zeilen abzielen und gleichzeitig das Standardverhalten der „row“-Klasse für andere Situationen beibehalten. Dieser Ansatz wahrt die Integrität des Bootstrap-Frameworks und ermöglicht Ihnen gleichzeitig, Ihre Layouts nach Bedarf anzupassen.

Das obige ist der detaillierte Inhalt vonWie füge ich Zeilen in Twitter Bootstrap einen oberen Rand hinzu, ohne die Klasse „row' zu ändern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!