Bootstrap 4讓特定元素在特定的裝置畫面中消失

有時候我們會想要在行動裝置的寬度下,讓按鈕中的文字或圖案消失,在不變更版面的排列下讓UI的體驗可以更加一致性,這篇文章將展示如何做到這樣的語法。

首先我們有下列的HTML:

<div class="row col-12 mt-4">
  <div class="col-8 col-md-6">
    <h3><i class="fab fa-microsoft fa-fw"></i> OOO管理系統</h3>
  </div>
  <div class="col-4 col-md-6">
    <div class="d-inline float-right">
      <a href="#" class="btn btn-primary"><i class="fas fa-check fa-fw"></i> 新增</a>
      <a href="#" class="btn btn-danger"><i class="fas fa-times fa-fw"></i> 刪除</a>
    </div>
  </div>
</div>

畫面如下:

而我們希望如果畫面寬度再進一步縮小,是否可以留下打勾跟打叉的ICON就好,新增跟刪除的中文字眼可以消失。

讓特定元素在特定的裝置畫面中消失

答案就是利用d-none CSS類別來進行控制,例如某個元素只想要在md(Medium)以上的裝置才顯現,md以下的裝置都消失,則我們可以使用這樣的語法。

OOO<span class="d-none d-md-inline">這行字在md以下的裝置會消失喔!</span>OOO

承剛才的HTML,套用上去後會長的如下:

<div class="row col-12 mt-4">
  <div class="col-8 col-md-6">
    <h3><i class="fab fa-microsoft fa-fw"></i> OOO管理系統</h3>
  </div>
  <div class="col-4 col-md-6">
    <div class="d-inline float-right">
      <a href="#" class="btn btn-primary"><i class="fas fa-check fa-fw"></i> <span class="d-none d-sm-inline">新增</span></a>
      <a href="#" class="btn btn-danger"><i class="fas fa-times fa-fw"></i> <span class="d-none d-sm-inline">刪除</span></a>
    </div>
  </div>
</div>

在sm(Small)、xs(Extra small)這種可視寬度極小的狀況下,新增跟刪除的字眼消失嘍!

參考連結:

Bootstrap 4顯示隱藏Grid指令對照表 BS4 BS3 Bootstrap4 DifferentDevice DisplayWidth ShowElement HideElement Visible Invisible