第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

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

跨越 bootstrap 4 卡組的標(biāo)題

跨越 bootstrap 4 卡組的標(biāo)題

ibeautiful 2023-12-19 10:44:51
我有一個帶有標(biāo)題的引導(dǎo)卡組。目前,標(biāo)題位于卡片內(nèi),但我希望它跨越卡片組。如何才能做到這一點?        <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貢獻(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


查看完整回答
反對 回復(fù) 2023-12-19
  • 1 回答
  • 0 關(guān)注
  • 152 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號