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）這種可視寬度極小的狀況下，新增跟刪除的字眼消失嘍！