Rumah > Artikel > hujung hadapan web > Apakah nama kelas untuk membersihkan terapung dalam bootstrap
Apakah nama kelas untuk membersihkan terapung dalam bootstrap
- WBOYasal
- 2022-05-07 17:20:032539semak imbas
Nama kelas untuk membersihkan terapung dalam bootstrap ialah clearfix ialah kelas tambahan dalam bootstrap Anda boleh mengosongkan nombor titik terapung dengan menambahkan ".clearfix" pada elemen induk ;element class="clearfix">".
Persekitaran pengendalian tutorial ini: sistem Windows 10, bootstrap versi 3.3.7, komputer DELL G3
bootstrap membersihkan terapung Apakah nama kelasnya?
Jadi rangka kerja CSS umum akan mempunyai gaya untuk mengosongkan terapung.
Dalam bootstrap, gaya ini dipanggil
.clearfixCuma tambah clearfix pada elemen induk bagi elemen yang perlu dikosongkan.
Clearfix digunakan untuk mengosongkan nombor titik terapung dengan mudah dengan menambahkan .clearfix pada elemen induk
Sintaksnya serupa:
Contohnya seperti berikut:<div class="clearfix">...</div>
Buat fail html baharu, bernama test.html, untuk menerangkan kelas yang hendak digunakan untuk mengosongkan terapung dalam bootstrap. Gunakan teg pautan untuk memuatkan fail bootstrap.min.css.
Dalam teg div, gunakan div untuk mencipta dua baris teks. Tambahkan atribut kelas pada div luar dan tetapkan lebarnya kepada 350px, tinggi kepada 100px dan warna latar belakang kepada kelabu melalui kelas.
Tambahkan div lain sebelum dua div dalam, dan tambahkan clearfix nama kelas terapung yang jelas padanya, supaya terapung div atas dan bawah tidak menjejaskan satu sama lain.
<!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>
Cadangan berkaitan:
Atas ialah kandungan terperinci Apakah nama kelas untuk membersihkan terapung dalam bootstrap. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!