" ."/> " .">

Rumah  >  Artikel  >  hujung hadapan web  >  Apakah nama kelas untuk membersihkan terapung dalam bootstrap

Apakah nama kelas untuk membersihkan terapung dalam bootstrap

WBOY
WBOYasal
2022-05-07 17:20:032548semak 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">".

Apakah nama kelas untuk membersihkan terapung dalam bootstrap

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.


Buka fail test.html dalam penyemak imbas untuk menyemak kesannya.
<!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>

Apakah nama kelas untuk membersihkan terapung dalam bootstrapCadangan berkaitan:

tutorial bootstrap

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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn