Cara mengosongkan gaya terapung dalam bootstrap-tutorial mysql-php.cn

Cara mengosongkan gaya terapung dalam bootstrap

WBOY

Lepaskan： 2022-06-21 17:03:24

asal

2214 orang telah melayarinya

Dalam bootstrap, anda boleh menggunakan kelas tambahan ".clearfix" untuk mengosongkan gaya terapung Kelas tambahan ialah satu set kelas alat yang disediakan oleh bootstrap untuk membantu pembangunan projek. Hanya tetapkan nama kelas kepada ".clearfix", dan sintaksnya ialah "".

Cara mengosongkan gaya terapung dalam bootstrap

Persekitaran pengendalian tutorial ini: sistem Windows 10, bootstrap versi 5, komputer DELL G3

Cara mengosongkan gaya terapung dalam bootstrap

bootstrap menyediakan satu set kelas alat untuk membantu pembangunan projek

Meja depan diperbuat daripada bootstrap Apabila saya menghadapi sesuatu yang perlu dibersihkan, saya menemui kaedah selepas menyemak maklumat.

<div class="clearfix"></div>

Salin selepas log masuk

Hanya tambahkan ini di mana anda perlu mengosongkan pelampung!

Contohnya adalah seperti berikut:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 实例 - 清除浮动</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="clearfix"  style="background: #D8D8D8;border: 1px solid #000;padding: 10px;">
<div class="pull-left" style="background:#58D3F7;">
      向左快速浮动
   </div>
   <div class="pull-right" style="background: #DA81F5;">
      向右快速浮动
   </div>
</div>
</body>
</html>

Salin selepas log masuk

Hasil keluaran:

Cara mengosongkan gaya terapung dalam bootstrap

Tetapkan kelas tambahan:

<div class="clearfix"    style="max-width:90%">
<div class="clearfix" style="background:#58D3F7;">
      向左快速浮动
   </div>
   <div class="pull-right" style="background: #DA81F5;">
      向右快速浮动
   </div>
</div>

Salin selepas log masuk

Hasil keluaran:

Cara mengosongkan gaya terapung dalam bootstrap

Cadangan berkaitan: tutorial bootstrap

Atas ialah kandungan terperinci Cara mengosongkan gaya terapung dalam bootstrap. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!