我的引導(dǎo)網(wǎng)站的布局由兩列組成（在桌面上）。在每一列上，內(nèi)容都是靜態(tài)堆疊的。兩側(cè)div都有不同的高度，如下所示：A | BA | D C | DE | FE現(xiàn)在，我已經(jīng)用兩個(gè)實(shí)現(xiàn)了這一布局col-6，并用 content 填充了每個(gè)布局div。但是，移動(dòng)布局的斷點(diǎn)僅設(shè)計(jì)用于將列堆疊在一起，如下所示：AACEEBDDF我的問(wèn)題是，在上面的插圖中， Adiv與 B 相關(guān)div，與 C 關(guān)系不大div。我希望以移動(dòng)布局的方式實(shí)現(xiàn)我的兩列桌面布局：AABCDDEEFdiv在移動(dòng)設(shè)備上，它實(shí)際上要求通過(guò)交替包含在行序列中的兩列內(nèi)部來(lái)合并。我的小指告訴我，這在引導(dǎo)程序中不可能有兩個(gè)col-6. 我希望盡可能避免 JavaScript 和自定義 CSS。也許整體布局需要在沒(méi)有col-6. 也許card-deck可以提供幫助，但我沒(méi)有找到任何令人滿意的東西。當(dāng)前代碼： <div class="container"> <div class="row pl-sm-3 px-1"> <div class="col-md-6 pt-sm-4"> <div class="row pb-5 justify-content-center"> <h1 class="display-4 text-light"> {{ $.Page.Title }} </h1> </div> <div class="text-center"> {{ range .Params.pictures }} <img ... > {{end}} </div> </div> <div class="col-md-6 pl-3 pr-4"> <div class="mt-5 pt-5"></div> <div class="card"> {{ range .Params.text}} <div class="card-body"> ... </div> {{end}} </div> </div> </div> </div>
1 回答
交互式愛(ài)情
TA貢獻(xiàn)1712條經(jīng)驗(yàn) 獲得超3個(gè)贊
您可以使用 bootstrap 來(lái)完成此操作，但必須添加下面的小 CSS 片段。經(jīng)過(guò)一些測(cè)試后，我為您找到了一個(gè)解決方案，其中我還使用了卡片網(wǎng)格。
如果您想使用 boostraps 卡，您可以將該card類添加到每個(gè)子元素（使用 col 類）。
@media (min-width: 576px) {
.card-columns.column-2 {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}
}
<div class="container">
<div class="card-columns column-2 row d-sm-block">
<div class="col-12 order-1">A<br/>A</div>
<div class="col-12 order-2">C</div>
<div class="col-12 order-1">B</div>
<div class="col-12 order-2">D<br/>D</div>
</div>
<div class="card-columns column-2 row d-sm-block">
<div class="col-12 order-1">E<br/>E</div>
<div class="col-12 order-2">F</div>
</div>
</div>
- 1 回答
- 0 關(guān)注
- 213 瀏覽
添加回答
舉報(bào)
0/150
提交
取消