布局
float
用于控制内容环绕元素的实用工具。
| Class | Styles |
|---|---|
float-right | float: right; |
float-left | float: left; |
float-start | float: inline-start; |
float-end | float: inline-end; |
float-none | float: none; |
示例
元素向右浮动
使用 float-right 工具将元素浮动到其容器的右侧：
也许我们可以不依赖图书馆，像你我这样的人。也许。当然，我们已经太老而无法改变世界，但是 那个孩子呢？他现在正坐在本地图书馆的分支里，打开一本书，发现《猫帽子》与五个中国兄弟里 有小便和尿尿的画画？难道他不配更好的吗？你看。如果你认为这与逾期罚款和丢失的书籍有关， 你最好再想想。这是关于那个孩子阅读书籍的权利，而不让他的心智受到扭曲！或者：也许这让你兴奋， 我的朋友；也许这就是你获得乐趣的方式。你和你的好朋友们。
<article> <img class="float-right ..." src="/img/mountains.jpg" /> <p>也许我们可以不依赖图书馆，像你我这样的人。...</p></article>元素向左浮动
使用 float-left 工具将元素浮动到其容器的左侧：
也许我们可以不依赖图书馆，像你我这样的人。也许。当然，我们已经太老而无法改变世界，但是 那个孩子呢？他现在正坐在本地图书馆的分支里，打开一本书，发现《猫帽子》与五个中国兄弟里 有小便和尿尿的画画？难道他不配更好的吗？你看。如果你认为这与逾期罚款和丢失的书籍有关， 你最好再想想。这是关于那个孩子阅读书籍的权利，而不让他的心智受到扭曲！或者：也许这让你兴奋， 我的朋友；也许这就是你获得乐趣的方式。你和你的好朋友们。
<article> <img class="float-left ..." src="/img/mountains.jpg" /> <p>也许我们可以不依赖图书馆，像你我这样的人。...</p></article>使用逻辑属性
使用 float-start 和 float-end 工具，这些工具使用 逻辑属性 根据文本方向映射到左侧或右侧：
从左到右
也许我们可以不依赖图书馆，像你我这样的人。也许。当然，我们已经太老而无法改变世界， 但是那个孩子呢？他现在正坐在本地图书馆的分支里，打开一本书，发现《猫帽子》与五个中国兄弟里 有小便和尿尿的画画？难道他不配更好的吗？你看。如果你认为这与逾期罚款和丢失的书籍有关， 你最好再想想。这是关于那个孩子阅读书籍的权利，而不让他的心智受到扭曲！或者：也许这让你兴奋， 我的朋友；也许这就是你获得乐趣的方式。你和你的好朋友们。
从右到左
ربما يمكننا العيش بدون مكتبات، أشخاص مثلي ومثلك. ربما. بالتأكيد، نحن أكبر من أن نغير العالم، ولكن ماذا عن ذلك الطفل الذي يجلس ويفتح كتابًا الآن في أحد فروع المكتبة المحلية ويجد رسومات للتبول والبول على القطة في القبعة والإخوة الصينيون الخمسة؟ ألا يستحق الأفضل؟ ينظر. إذا كنت تعتقد أن الأمر يتعلق بالغرامات المتأخرة والكتب المفقودة، فمن الأفضل أن تفكر مرة أخرى. يتعلق الأمر بحق ذلك الطفل في قراءة كتاب دون أن يتشوه عقله! أو: ربما يثيرك هذا يا سينفيلد؛ ربما هذه هي الطريقة التي تحصل بها على ركلاتك. أنت ورفاقك الطيبين.
<article> <img class="float-start ..." src="/img/mountains.jpg" /> <p>也许我们可以不依赖图书馆，像你我这样的人。...</p></article><article dir="rtl"> <img class="float-start ..." src="/img/mountains.jpg" /> <p>... ربما يمكننا العيش بدون مكتبات، أشخاص مثلي ومثلك. ربما. بالتأكيد</p></article>禁用浮动
使用 float-none 工具重置应用于元素的任何浮动：
也许我们可以不依赖图书馆，像你我这样的人。也许。当然，我们已经太老而无法改变世界，但是 那个孩子呢？他现在正坐在本地图书馆的分支里，打开一本书，发现《猫帽子》与五个中国兄弟里 有小便和尿尿的画画？难道他不配更好的吗？你看。如果你认为这与逾期罚款和丢失的书籍有关， 你最好再想想。这是关于那个孩子阅读书籍的权利，而不让他的心智受到扭曲！或者：也许这让你兴奋， 我的朋友；也许这就是你获得乐趣的方式。你和你的好朋友们。
<article> <img class="float-none ..." src="/img/mountains.jpg" /> <p>也许我们可以不依赖图书馆，像你我这样的人。...</p></article>响应式设计
Prefix a float utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:
<img class="float-right md:float-left" src="/img/mountains.jpg" />Learn more about using variants in the variants documentation.