"."/> ".">

Home  >  Article  >  Database  >  How to clear floating styles in bootstrap

How to clear floating styles in bootstrap

WBOY
WBOYOriginal
2022-06-21 17:03:242197browse

In bootstrap, you can use the ".clearfix" auxiliary class to clear floating styles. The auxiliary class is a set of tool classes provided by bootstrap to assist project development. You only need to clear the floating elements. Just set the class name to ".clearfix", and the syntax is "".

How to clear floating styles in bootstrap

The operating environment of this tutorial: Windows 10 system, bootstrap version 5, DELL G3 computer

How to clear floating styles in bootstrap

bootstrap provides a set of tool classes to assist in project development

The front desk is made of bootstrap. When I encounter something that needs to be cleared, I found a method after checking the information.

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

Just add this where you need to clear the float!

The example is as follows:

<!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>

Output result:

How to clear floating styles in bootstrap

##Set auxiliary class:

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

Output result :

How to clear floating styles in bootstrap

Related recommendations:

bootstrap tutorial

The above is the detailed content of How to clear floating styles in bootstrap. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn