如何使用 Bootstrap 隱藏響應式佈局中的元素？

使用Bootstrap 隱藏響應式佈局中的元素

設計響應式佈局時，管理空間變得至關重要，尤其是在較小的螢幕上。 Bootstrap 為行動裝置提供了對折疊功能表列專案的支持，但是如果您想類似地隱藏其他頁面元素怎麼辦？

解決方案：

Bootstrap 提供了允許您的類別根據螢幕尺寸隱藏元素：

• 超小型裝置： 手機(
• 小型裝置：平板電腦(≥768px) - . visible-sm-*（顯示）、.hidden-sm（隱藏）
• 中型設備: 桌面(≥992px) - .visible-md-* （顯示）、.hidden- md （隱藏）
• 大型設備： 桌面(≥1200px) - .visible -lg-*（顯示），.hidden-lg（隱藏）

用法示例：

在小屏幕上隱藏.nav-pills 元素:

<div class="nav-pills hidden-xs">
  ...
</div>

附加說明：

• 對於Bootstrap 4，使用hidden-*-up（隱藏較大的斷點）或hidden-*-down （隱藏較小的斷點）。
• Bootstrap 3.2.0 已棄用 .hidden-*，轉而使用 .visible-*。
• 在較舊的 Bootstrap 版本中，.hidden-phone 和 .hidden-tablet已過時。

以上是如何使用 Bootstrap 隱藏響應式佈局中的元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！