我正在嘗試在 Bootstrap 按鈕組中的按鈕之間添加間距。我知道這可以通過使用按鈕工具列來代替，但是，我無法弄清楚如何使其合理（即填充 100% 的寬度）。這是我需要的一個功能，據我所知，只有按鈕組才能實作。
下面的代碼創建了一個按鈕條，這些按鈕沒有間距地相互連接。我希望它們內嵌顯示為單個按鈕，間隔相等，寬度與文本長度成正比。
.btn-group {
width: 100%;
}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1 K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2 l" crossorigin="anonymous">
<div class="btn-group" role="group" id="indicative">
<button type="button" class="btn btn-outline-primary shadow-none disabled" id="indicative-present">present</button>
<button type="button" class="btn btn-outline-primary shadow-none disabled" id="indicative-preterite">preterite</button>
<button type="button" class="btn btn-outline-primary shadow-none disabled" id="indicative-imperfect">imperfect</button>
<button type="button" class="btn btn-outline-primary shadow-none disabled" id="indicative-conditional">conditional</button>
<button type="button" class="btn btn-outline-primary shadow-none disabled" id="indicative-future">future</button>
</div>uj5u.com熱心網友回復：
歡迎來到 flexbox！
- 啟用彈性行為
- 彈性填充
另外，為了讓事情不那么局促......
- 間距實用程式
為了這個演示......
背景顏色
邊框
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1 K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2 l" crossorigin="anonymous">
<div class="d-flex bg-light border py-1" id="indicative">
<button type="button" id="indicative-present"
class="btn btn-outline-primary shadow-none disabled flex-fill mx-1">present</button>
<button type="button" id="indicative-preterite"
class="btn btn-outline-primary shadow-none disabled flex-fill mx-1">preterite</button>
<button type="button" id="indicative-imperfect"
class="btn btn-outline-primary shadow-none disabled flex-fill mx-1">imperfect</button>
<button type="button" id="indicative-conditional"
class="btn btn-outline-primary shadow-none disabled flex-fill mx-1">conditional</button>
<button type="button" id="indicative-future"
class="btn btn-outline-primary shadow-none disabled flex-fill mx-1">future</button>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/389406.html
標籤：html css bootstrap-4
下一篇：無效的工具提示位置可能嗎？