版面配置
float
用於控制元素周圍內容包覆方式的實用程式。
| 類別 | 樣式 |
|---|---|
float-right | float: right; |
float-left | float: left; |
float-start | float: inline-start; |
float-end | float: inline-end; |
float-none | float: none; |
範例
將元素浮動到右側
使用 float-right 實用程式將元素浮動到其容器的右側
也許我們可以沒有程式庫，像你我這樣的人。也許。當然，我們太老了，無法改變世界，但是那個孩子呢，現在坐下來，打開一本書，在當地圖書館的分館裡，發現《戴帽子的貓》和《五個中國兄弟》上畫著小雞雞和小陰陰？他難道不值得更好嗎？聽著。如果你認為這是關於逾期罰款和遺失書籍，你最好再想一想。這是關於那個孩子有權閱讀書籍而不會讓他的思想扭曲！或者：也許這讓你很興奮，Seinfeld；也許這就是你獲得快感的方式。你和你的美好時光夥伴們。
<article> <img class="float-right ..." src="/img/mountains.jpg" /> <p>Maybe we can live without libraries, people like you and me. ...</p></article>將元素浮動到左側
使用 float-left 實用程式將元素浮動到其容器的左側
也許我們可以沒有程式庫，像你我這樣的人。也許。當然，我們太老了，無法改變世界，但是那個孩子呢，現在坐下來，打開一本書，在當地圖書館的分館裡，發現《戴帽子的貓》和《五個中國兄弟》上畫著小雞雞和小陰陰？他難道不值得更好嗎？聽著。如果你認為這是關於逾期罰款和遺失書籍，你最好再想一想。這是關於那個孩子有權閱讀書籍而不會讓他的思想扭曲！或者：也許這讓你很興奮，Seinfeld；也許這就是你獲得快感的方式。你和你的美好時光夥伴們。
<article> <img class="float-left ..." src="/img/mountains.jpg" /> <p>Maybe we can live without libraries, people like you and me. ...</p></article>使用邏輯屬性
使用 float-start 和 float-end 實用程式，這些實用程式使用邏輯屬性根據文字方向對應到左側或右側
由左至右
也許我們可以沒有程式庫，像你我這樣的人。也許。當然，我們太老了，無法改變世界，但是那個孩子呢，現在坐下來，打開一本書，在當地圖書館的分館裡，發現《戴帽子的貓》和《五個中國兄弟》上畫著小雞雞和小陰陰？他難道不值得更好嗎？聽著。如果你認為這是關於逾期罰款和遺失書籍，你最好再想一想。這是關於那個孩子有權閱讀書籍而不會讓他的思想扭曲！或者：也許這讓你很興奮，Seinfeld；也許這就是你獲得快感的方式。你和你的美好時光夥伴們。
由右至左
也許像你我這樣的人，沒有圖書館也能活下去。也許吧。當然，我們太渺小，無法改變世界，但對於那個現在坐在當地圖書館分館，翻開一本書，看到《戴帽子的貓》中貓咪和小便、以及《五個中國兄弟》的孩子呢？難道他不值得擁有更好的嗎？想想看。如果你認為這只是關於逾期罰款和遺失書籍，那你最好再想想。這關係到那個孩子閱讀書籍的權利，而不讓他的心靈受到汙染！或者：也許這會讓你興奮，辛菲爾德；也許這就是你獲得快感的方式。你和你的那些好朋友們。
<article> <img class="float-start ..." src="/img/mountains.jpg" /> <p>Maybe we can live without libraries, people like you and me. ...</p></article><article dir="rtl"> <img class="float-start ..." src="/img/mountains.jpg" /> <p>... ربما يمكننا العيش بدون مكتبات، أشخاص مثلي ومثلك. ربما. بالتأكيد</p></article>停用浮動
使用 float-none 工具類來重置應用於元素的任何浮動效果
也許我們可以沒有程式庫，像你我這樣的人。也許。當然，我們太老了，無法改變世界，但是那個孩子呢，現在坐下來，打開一本書，在當地圖書館的分館裡，發現《戴帽子的貓》和《五個中國兄弟》上畫著小雞雞和小陰陰？他難道不值得更好嗎？聽著。如果你認為這是關於逾期罰款和遺失書籍，你最好再想一想。這是關於那個孩子有權閱讀書籍而不會讓他的思想扭曲！或者：也許這讓你很興奮，Seinfeld；也許這就是你獲得快感的方式。你和你的美好時光夥伴們。
<article> <img class="float-none ..." src="/img/mountains.jpg" /> <p>Maybe we can live without libraries, people like you and me. ...</p></article>響應式設計
前綴一個 float 工具類 加上一個斷點變體，例如 md:，僅在中型 螢幕尺寸及以上時應用該工具類
<img class="float-right md:float-left" src="/img/mountains.jpg" />在變體文檔中了解更多關於使用變體的資訊。
