Bulma通過container、columns網(wǎng)格和響應(yīng)式類實現(xiàn)響應(yīng)式布局。使用container控制內(nèi)容寬度，結(jié)合mobile、tablet、desktop等斷點，通過is-half-tablet、is-one-third-desktop等類設(shè)置列寬，利用is-hidden-mobile、is-visible-desktop等控制元素顯示，配合is-multiline和is-gapless調(diào)整布局，無需JavaScript即可構(gòu)建多端適配的頁面。

Bulma 是一個基于 Flexbox 的現(xiàn)代 CSS 框架，它原生支持響應(yīng)式布局，無需 JavaScript。實現(xiàn)響應(yīng)式的關(guān)鍵在于使用其內(nèi)置的網(wǎng)格系統(tǒng)和響應(yīng)式工具類。下面介紹幾種常用方法。

使用 container 和 responsive breakpoints

Bulma 推薦將內(nèi)容包裹在 container 中，以控制最大寬度并居中內(nèi)容。container 會根據(jù)屏幕尺寸自動調(diào)整寬度。

• mobile：小于 768px
• tablet：769px ~ 1023px
• desktop：1024px 及以上
• widescreen：1216px ~ 1407px
• fullhd：1408px 及以上

通過添加如 is-hidden-mobile、is-flex-desktop 等類，可以針對不同設(shè)備控制元素顯示或布局方式。

利用 columns 實現(xiàn)響應(yīng)式網(wǎng)格

Bulma 的 columns 系統(tǒng)基于 Flexbox，能自動換行并對齊子列。默認情況下，在移動設(shè)備上堆疊，平板及以上橫向排列。

立即學(xué)習(xí)“前端免費學(xué)習(xí)筆記（深入）”；

示例代碼：

<div class="columns">
  <div class="column is-half-tablet is-one-third-desktop">內(nèi)容1</div>
  <div class="column is-half-tablet is-one-third-desktop">內(nèi)容2</div>
  <div class="column is-full-tablet is-one-third-desktop">內(nèi)容3</div>
</div>

說明：在手機上每列占滿一行；在 tablet 上前兩列并排（各占一半），第三列獨占；desktop 上三列等寬并列。

法語寫作助手

法語助手旗下的AI智能寫作平臺，支持語法、拼寫自動糾錯，一鍵改寫、潤色你的法語作文。

31

查看詳情

控制列寬與對齊

使用 is-1 到 is-12 設(shè)置固定列寬（相對于12列網(wǎng)格）。也可以結(jié)合響應(yīng)式前綴實現(xiàn)動態(tài)變化。

• is-three-quarters：占 9/12 寬度
• is-offset-2：左側(cè)留空 2 列
• is-gapless 移除列間距，is-multiline 允許多行布局

比如：class="column is-12-mobile is-6-tablet is-4-desktop" 表示在手機上全寬，tablet 占一半，desktop 占三分之一。

隱藏與顯示元素

通過響應(yīng)式可見性類，可控制元素在特定設(shè)備是否顯示。

• is-hidden-mobile：僅在手機隱藏
• is-hidden-tablet-only：僅在 tablet 隱藏
• is-visible-desktop：只在 desktop 顯示

這適合為不同設(shè)備提供不同的內(nèi)容展示邏輯，比如隱藏移動端導(dǎo)航菜單中的次要鏈接。

基本上就這些。Bulma 的響應(yīng)式設(shè)計靠類名組合完成，結(jié)構(gòu)清晰，不需要寫額外 CSS。只要理解斷點劃分和列行為，就能快速搭建適配多端的頁面布局。

以上就是css框架Bulma實現(xiàn)響應(yīng)式布局方法的詳細內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！