当前位置：网站首页>How bootstrap clears floating styles

How bootstrap clears floating styles

2022-06-23 07:33:00 【Yisu cloud】

bootstrap How to clear floating styles

This article mainly introduces “bootstrap How to clear floating styles ”, In daily operation , I believe a lot of people are bootstrap There are doubts about how to clear floating styles , Xiao Bian consulted all kinds of materials , Sort out simple and easy-to-use operation methods , I hope to answer ”bootstrap How to clear floating styles ” Your doubts help ！ Next , Please follow Xiaobian to learn ！

stay bootstrap in , You can use “.clearfix” Auxiliary class to clear floating style , Auxiliary class is bootstrap A set of tool classes provided , For supporting project development , You only need to set the class name to... For the element that needs to clear the float “.clearfix” that will do , The grammar is “< Elements class="clearfix">”.

The operating environment of this tutorial ：Windows10 System 、bootstrap5 edition 、DELL G3 The computer

bootstrap How to clear floating styles

bootstrap Provides a set of tool classes , For supporting project development

The front desk uses bootstrap It's done , The floating needs to be cleared , After checking the data, I found a way .

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

Add this where you need to clear the float ！

Examples are as follows ：

<!DOCTYPE html><html><head><meta charset="utf-8"><title>Bootstrap  example  -  Remove the floating </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;">       Float quickly to the left    </div>   <div class="pull-right" style="background: #DA81F5;">       Float quickly to the right    </div></div></body></html>

Output results ：

bootstrap How to clear floating styles

Set auxiliary class ：

<div class="clearfix"  style="background: #D8D8D8;border: 1px solid #000;padding: 10px;"><div class="clearfix" style="background:#58D3F7;">       Float quickly to the left    </div>   <div class="pull-right" style="background: #DA81F5;">       Float quickly to the right    </div></div>

Output results ：

bootstrap How to clear floating styles

Here we are , About “bootstrap How to clear floating styles ” That's the end of my study , I hope we can solve your doubts . The combination of theory and practice can better help you learn , Let's try ！ If you want to continue to learn more related knowledge , Please continue to pay attention to Yisu cloud website , Xiaobian will continue to strive to bring you more practical articles ！

原网站

版权声明
本文为[Yisu cloud]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/174/202206230500130932.html

边栏推荐

猜你喜欢

随机推荐