twitter-bootstrap – 如何限制卡片组的列数？

发布时间：2020-12-17 21:31:10 所属栏目：安全来源：网络整理

导读：这是我的代码,我想要实现的只是连续四列,并且不多于或少于此,但是目前,卡的数量范围从1-10,它们一直压缩到10. div class="card-deck-wrapper" div class="card-deck" @foreach($resource-projects as $project) div class="card card-project" bla bla (ever

这是我的代码,我想要实现的只是连续四列,并且不多于或少于此,但是目前,卡的数量范围从1-10,它们一直压缩到10.

<div class="card-deck-wrapper">
            <div class="card-deck">
                @foreach($resource->projects as $project)
                    <div class="card card-project">
                        bla bla (every card let's say is like this)
                    </div>
                @endforeach
            </div>
        </div>

解决方法

作为 explained in the docs,Card layouts (decks,groups and columns) ……

“For the time being,these layout options are not yet responsive.”

因此,您无法限制卡片组中每行的卡片数量.您可以使用网格列,如果您需要使用相同高度的卡片,则可以使用flexbox.

<div class="row">
          <div class="col-sm-3">
                <div class="card">
                  ...
                </div>
          </div>
          <div class="col-sm-3">
                <div class="card">
                  ...
                </div>
          </div>
          ... {repeat col-sm-3}..
  </div>

http://codeply.com/go/AP1MpYKY2H

从Bootstrap 4 alpha 6开始：Flexbox现在是默认设置,因此不再需要额外的CSS.使用h-100使卡片填充列的高度.

https://www.codeply.com/go/rHe6rq5L76(Bootstrap 4.1的更新演示)

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!