Bootstrap 4讓按鈕在行動裝置時期才轉換成btn-block模式
Bootstrap 4的Grid系統中，有關於按鈕的配置讓我很困擾，就是當系統在同一列div（col-12）內提供的多數量的按鈕並且讓其自適性化大小RWD流動排列，但又想要讓它在行動裝置上變成btn-block方式的排列，以目前的Bootstrap Class提供的類別來說不太可能辦的到。
需求：讓按鈕群能夠流動性的排列
前端UI布局目標就是要讓為數眾多的按鈕，可以在桌上型電腦模式下，依照按鈕的字面長度自適性化的延伸或縮短，但當至手機裝置時，就將其轉換成btn-block模式，讓其可以在手機模式下每個按鈕一行行的條列顯示。
<div class="text-center col-12 mt-4">
<a href="#" class="mt-1 btn btn-lg btn-primary"><i class="fab fa-apple fa-fw"></i> 按鈕Ａ</a>
<a href="#" class="mt-1 btn btn-lg btn-danger"><i class="fab fa-aws fa-fw"></i> 按鈕Ｂ</a>
<a href="#" class="mt-1 btn btn-lg btn-dark"><i class="fab fa-microsoft fa-fw"></i> 按鈕Ｃ</a>
<a href="#" class="mt-1 btn btn-lg btn-warning"><i class="fab fa-docker fa-fw"></i> 按鈕Ｄ</a>
<a href="#" class="mt-1 btn btn-lg btn-success"><i class="fab fa-github fa-fw"></i> 按鈕Ｅ</a>
</div>
這樣做的好處是在一般寬度夠的情況，可以如同下圖這樣排列：
但在按鈕數量暴增時，按鈕會自動被擠下去（圖片中用寬度來模擬按鈕變多的情況），這對一個工程師來說是很重要的，美醜一回事，但系統功能按鈕不可消失啊！
好了，但在手機這麼小的寬度下，這樣的流動布局已經無意義了。這時候我們會需要每一列一個按鈕的布局，當你去查詢Bootstrap 4的文件時，它會叫你使用btn-block類別，但「一次btn-block，終身btn-block」啊！內建類別沒有因應螢幕的寬度才btn-block的解法。
經過搜尋，Bootstrap作者群已經明確的表示（btn-block class for different breakpoints #13647）那是你家的事情，最後一句話還給你放話挑釁哩！大家也可以從討論串中看出，到2014年就Closed掉的Issues到2019年還有人在那邊+1，表示大家都很需要這個需求啊！
mdo commented on 23 May 2014
@cvrebert We make one, folks will want all the rest of them. Plus it's a class that can be mixin-ed for folks who want it responsive. That doesn't account for every use case, but I don't think that's our goal anyway.
Make sense or am I being a stickler?
生命總會自己找到出口
如果你的HTML裡面的按鈕是A標籤，那恭喜可以使用下列的類別套入解決，答案如下：
d-block d-md-inline-block
套入後的結果，果然利用BS4 CSS的inline-block類別巧妙地解決掉了。在低於md寬度下的按鈕一律都被d-block化了。
但是如果你的HTML裡面的按鈕是傳統的button標籤，帶有不同的type（button、submit），這下問題又出現了。
<div class="text-center col-12 mt-4">
<button type="submit" class="mt-1 btn btn-lg btn-primary d-block d-md-inline-block"><i class="fab fa-apple fa-fw"></i> 按鈕Ａ</button>
<button type="button" class="mt-1 btn btn-lg btn-danger d-block d-md-inline-block"><i class="fab fa-aws fa-fw"></i> 按鈕Ｂ</button>
<button type="submit" class="mt-1 btn btn-lg btn-dark d-block d-md-inline-block"><i class="fab fa-microsoft fa-fw"></i> 按鈕Ｃ</button>
<button type="button" class="mt-1 btn btn-lg btn-warning d-block d-md-inline-block"><i class="fab fa-docker fa-fw"></i> 按鈕Ｄ</button>
<button type="submit" class="mt-1 btn btn-lg btn-success d-block d-md-inline-block"><i class="fab fa-github fa-fw"></i> 按鈕Ｅ</button>
</div>
button標籤沒有辦法因為d-block類別的引入而產生寬度的變化，從下圖中可以發現是block化了沒錯，但是寬度還是依照文字的長度適性化了。
祭出大招：依照media加入新的CSS類別
在Medium裝置（≥768px）之後，讓自訂的「btn-block-sm」CSS類別生效，並將套用該類別的HTML元素一律進行block設定與寬度的變更，也就是SM（Small）、XS（Extra small）兩種模式都會中獎。
<style>
@media (max-width: 767px)
{
.btn-block-sm {
display: block;
width: 100%;
}
}
</style>
完工後，button們已經乖乖地聽我們的話，在sm、xs模式下，乖乖地把寬度擴展到100%了。
瞧瞧HTML、CSS、JS發展迄今的這場鬧劇，可憐哪～