1 回答

TA貢獻(xiàn)1813條經(jīng)驗 獲得超2個贊
您可以使用彈性框解決此問題。將?.card-group
?div 包裹在彈性框 div 中,然后將標(biāo)題 div 移到?.card-group
?div 之外。
例子
<div class="d-flex flex-column">
? <div class="bg-white border-bottom-0 h5 font-weight-light">title</div>
? <div class="card-group"><!-- cards here --></div>
</div>
使用 display: flex; (.d-flex) 時,標(biāo)題 div 將與 .card-group div 對齊。
解決方案:
? <div class="d-flex flex-column">
? ? <div class="bg-white border-bottom-0 h5 font-weight-light">Project Status Overview</div>
? ? <div class="card-group">
? ? ? <div class="card border-right-0 border-top-0">
? ? ? ? <div class="card-body">
? ? ? ? ? <h1 class="card-text text-primary text-center">23</h1>
? ? ? ? ? <p class="card-title text-center font-weight-bold">Active Projects</p>
? ? ? ? </div>
? ? ? </div>
? ? ? <div class="card border-right-0 border-top-0">
? ? ? ? <div class="card-body">
? ? ? ? ? <h1 class="card-text text-secondary text-center">5</h1>
? ? ? ? ? <p class="card-title text-center font-weight-bold">Archived Projects</p>
? ? ? ? </div>
? ? ? </div>
? ? ? <div class="card border-right-0 border-top-0">
? ? ? ? <div class="card-body">
? ? ? ? ? <h1 class="card-text text-warning text-center">3</h1>
? ? ? ? ? <p class="card-title text-center font-weight-bold">Pending Dimensions</p>
? ? ? ? </div>
? ? ? </div>
? ? ? <div class="card border-top-0">
? ? ? ? <div class="card-body">
? ? ? ? ? <h1 class="card-text text-success text-center">32</h1>
? ? ? ? ? <p class="card-title text-center font-weight-bold">Estimates Available</p>
? ? ? ? </div>
? ? ? </div>
? ? </div>
? </div>
Jsbin 示例:https://jsbin.com/xeyiroyasa/edit?html,output
- 1 回答
- 0 關(guān)注
- 152 瀏覽
添加回答
舉報