Apakah nama kelas untuk membersihkan terapung dalam bootstrap-Soal Jawab bahagian hadapan-php.cn

Apakah nama kelas untuk membersihkan terapung dalam bootstrap

WBOY

Lepaskan： 2022-05-07 17:20:03

asal

2571 orang telah melayarinya

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>

Salin selepas log masuk

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>

Salin selepas log masuk

Apakah nama kelas untuk membersihkan terapung dalam bootstrap Cadangan 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!