如何在 Bootstrap 的 button group 讓整組和容器等寬,且按鈕平分寬度

分享:
標籤: Bootstrap CSS

要在 Bootstrap 設定按鈕分組我們會使用 btn-group 這個 class 並把 btn 包起來,像是:

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

 

這時按鈕會跟寬度差不多,如果希望按鈕可以跟容器一樣寬,只需要在 btn-group 那一層加 d-flex 這個 class 就好了,像是:

<div class="btn-group d-flex" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

 

和我們交流

加入我們的社群,裡面會有一些技術的內容、有趣的技術梗,以及職缺的分享,歡迎和我們一起討論。