Heim > Artikel > Web-Frontend > Wie lautet der Klassenname zum Löschen von Floats im Bootstrap?
Wie lautet der Klassenname zum Löschen von Floats im Bootstrap?
- WBOYOriginal
- 2022-05-07 17:20:032535Durchsuche
Der Klassenname zum Löschen von Floats in Bootstrap ist eine Hilfsklasse in Bootstrap. Sie können Gleitkommazahlen einfach löschen, indem Sie „.clearfix“ zum übergeordneten Element hinzufügen „clearfix“>“.
Die Betriebsumgebung dieses Tutorials: Windows 10-System, Bootstrap-Version 3.3.7, DELL G3-Computer
Wie lautet der Klassenname von Bootstrap zum Löschen von Floats?
Das wissen wir beim Schreiben von Bei statischen Seiten ist das Löschen von Floats eine sehr mühsame Angelegenheit.
Allgemeine CSS-Frameworks verfügen also über Stile, die zum Löschen von Floats verwendet werden.
In Bootstrap heißt dieser Stil clearfix.
Fügen Sie einfach Clearfix zum übergeordneten Element des Elements hinzu, das gelöscht werden muss.
Clearfix wird verwendet, um Gleitkommazahlen einfach zu löschen, indem .clearfix zum übergeordneten Element hinzugefügt wird.
Die Syntax ist ähnlich:
<div class="clearfix">...</div>
Das Beispiel lautet wie folgt:
Erstellen Sie eine neue HTML-Datei mit dem Namen test.html Erläutern Sie das Löschen von Floats im Bootstrap. Welche Klasse verwendet werden soll. Verwenden Sie das Link-Tag, um die Datei „bootstrap.min.css“ zu laden.
Verwenden Sie im div-Tag div, um zwei Textzeilen zu erstellen. Fügen Sie das Klassenattribut zum äußeren Div hinzu und legen Sie seine Breite auf 350 Pixel, die Höhe auf 100 Pixel und die Hintergrundfarbe durch die Klasse auf Grau fest.
Fügen Sie vor den beiden inneren Divs ein weiteres Div hinzu und fügen Sie den klaren Floating-Klassennamen Clearfix hinzu, damit sich das Floating des oberen und unteren Divs nicht gegenseitig beeinflusst.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="js/bootstrap.min.css">
</head>
<body>
<style>
.mytest{
width:400px;
height:50px;
background:#ccc;
}
</style>
<div class="mytest">
<div class="pull-left">测试一</div>
<div class="clearfix"></div>
<div class="pull-left">测试二</div>
</div>
</body>
</html>Öffnen Sie die Datei test.html im Browser, um den Effekt zu sehen.
Verwandte Empfehlungen: Bootstrap-Tutorial
Das obige ist der detaillierte Inhalt vonWie lautet der Klassenname zum Löschen von Floats im Bootstrap?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!