极客教程Bootstrap 5 Float响应式
Bootstrap 5 Float Responsive是用来使元素根据屏幕的大小浮动的。元素有两面可以浮动，一面是右边，另一面是左边，或者你可以让它不浮动。
Bootstrap 5 Float响应式类:
- float-start。该类用于将元素浮动在屏幕的左侧。
- float-end。该类用于将元素漂浮在屏幕的右侧。
- float-none。该类用于停止在屏幕上浮动元素。
float-*-^:*代表屏幕尺寸（sm, md, lg, & xl），代表浮动位置（start, end & none）。
注：和*可根据您的需要进行更改。*代表屏幕尺寸(sm, md, lg, & xl)，^代表浮动位置(start, end & none)
语法:
<div class="float-*-^">
例子1：在这个例子中，我们将创建4个div元素，当屏幕尺寸改变时，这些元素将漂浮在屏幕的右侧。
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
</head>
<body class="m-3">
<center>
<h1 class="text-success">
GeeksforGeeks
</h1>
<strong>Bootstrap 5 Float Responsive</strong>
</center>
<div class="conatiner">
<div class="float-sm-end">
I will float to the right when the screen size is small or wider
</div>
<br>
<div class="float-md-end">
I will float to the right when the screen size is medium or wider
</div>
<br>
<div class="float-lg-end">
I will float to the right when the screen size is large or wider
</div>
<br>
<div class="float-xl-end">
I will float to the right when the screen size is extra large or wider
</div>
</div>
</body>
</html>
输出:
Bootstrap 5 Float响应式
例子2：在这个例子中，我们将根据屏幕的大小将元素浮动在两边。当屏幕尺寸为小和超大时，元素将向左浮动，当屏幕尺寸为中和大时，将向右浮动。
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
</head>
<body class="m-3">
<center>
<h1 class="text-success">
GeeksforGeeks
</h1>
<strong>Bootstrap 5 Float Responsive</strong>
</center>
<div class="conatiner">
<div class="float-sm-end float-lg-start">
I will float to the right when the screen size is small or wider
</div>
<br>
<div class="float-md-end float-lg-start">
I will float to the right when the screen size is medium or wider
</div>
<br>
<div class="float-lg-end float-lg-start">
I will float to the right when the screen size is large or wider
</div>
<br>
<div class="float-xl-end float-lg-start">
I will float to the right when the screen size is extra large or wider
</div>
</div>
</body>
</html>
输出:
Bootstrap 5 Float响应式