时间戳

首页 > 解决方案 > Boostrap 4 合并列与交替行

html - Boostrap 4 合并列与交替行

问题描述

我的引导网站有一个由两列组成的布局（在桌面上）。在每一列上，内容都是静态堆叠的。div两侧的高度不同，如下所示：

A | B
A | D 
C | D
E | F
E

现在，我已经用两个实现了这个布局，col-6并用 content 填充每个布局div。

但是，移动布局的断点仅用于将列堆叠在一起，如下所示：

A
A
C
E
E
B
D
D
F

我的问题是，在我上面的插图中， Adiv与 B 相关，div与 C 无关div。我很想以移动布局的方式实现我的两列桌面布局：

A
A
B
C
D
D
E
E
F

div在移动设备上，它实际上需要通过交替它们包含在一系列行中来合并两列的内部。我的小指告诉我，这在带有两个的引导程序中是不可能的col-6。我希望尽可能避免使用 JavaScript 和自定义 CSS。也许整体布局需要在没有col-6. 也许card-deck可以提供帮助，但我没有找到任何令人满意的东西。

当前代码：

         <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>

标签： htmlcssbootstrap-4responsive

解决方案

你可以用 bootstrap 来做，但你必须在下面添加小的 CSS 片段。经过一些测试，我为你找到了一个解决方案，我也使用了卡片网格。

如果您想使用 boostraps 卡片，您可以将该card类添加到每个子元素（使用 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>

推荐阅读