亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

跨越 bootstrap 4 卡組的標題

跨越 bootstrap 4 卡組的標題

ibeautiful 2023-12-19 10:44:51
我有一個帶有標題的引導卡組。目前,標題位于卡片內,但我希望它跨越卡片組。如何才能做到這一點?        <div class="card-group">            <div class="card border-right-0 border-top-0">                <div class="card-header bg-white border-bottom-0 h5 font-weight-light">Project Status Overview</div>                <div class="card-body">                    <h1 class="card-text text-primary text-center">@ViewBag.ActiveProjects</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-header bg-white border-bottom-0 h5 font-weight-light">&nbsp;</div>                <div class="card-body">                    <h1 class="card-text text-secondary text-center">@ViewBag.ArchivedProjects</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-header bg-white border-bottom-0 h5 font-weight-light">&nbsp;</div>                <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-header bg-white border-bottom-0 h5 font-weight-light">&nbsp;</div>                <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>
查看完整描述

1 回答

?
慕姐8265434

TA貢獻1813條經驗 獲得超2個贊

您可以使用彈性框解決此問題。將?.card-group?div 包裹在彈性框 div 中,然后將標題 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) 時,標題 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


查看完整回答
反對 回復 2023-12-19
  • 1 回答
  • 0 關注
  • 156 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號