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> ＯＯＯ管理系統</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以下的裝置都消失，則我們可以使用這樣的語法。

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

承剛才的HTML，套用上去後會長的如下：

<div class="row col-12 mt-4">
  <div class="col-8 col-md-6">
    <h3><i class="fab fa-microsoft fa-fw"></i> ＯＯＯ管理系統</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）這種可視寬度極小的狀況下，新增跟刪除的字眼消失嘍！

參考連結：