如何限制卡片组的列数？答案

【问题标题】：How to limit number of columns of card-deck?如何限制卡片组的列数？
【发布时间】：2016-12-18 02:50:48
【问题描述】：

这是我的代码，我想要实现的只是一行四列，不多也不少，但目前卡片的数量范围是 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>

【问题讨论】：

标签： twitter-bootstrap bootstrap-4 frontend

【解决方案1】：

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

“目前，这些布局选项还没有响应。”

因此，您不能限制card-deck 中每行的卡片。如果您需要卡片等高，您可以使用网格列和 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 的更新演示）

【讨论】：

也许你能帮助我。看看这个：stackoverflow.com/questions/52568601/…

【解决方案2】：

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>

在名为 card-deck 的部分下添加您的卡片，然后使用这些 css 属性：只是一个例子。根据需要编辑值。

.card-deck{
    margin-top: 10px;
    margin-left: auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    grid-gap: .5rem;
}

参考1：https://www.w3schools.com/cssref/pr_grid-template-columns.asp 参考2：https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns

【讨论】：

这就是我的解决方案！！您还可以使用这些 CSS 设置添加自定义样式组件并使用它。比如我的是这样在映射数据数组的时候就不用关心行和列了！

【解决方案3】：

对于打字稿和组件驱动的应用程序，有一个基于 Clin John Xavier 建议代码的优雅解决方案：

import { StyledCardDeck, } from "./style";
<StyledCardDeck>
  <StyledCard>
      ...// card content here
  </StyledCard>
</StyledCardDeck>

然后在你的 style.tsx 中：

export const StyledCardDeck = styled(({ ...rest }) => <CardDeck {...rest} 
/>)`
  margin-top: 10px;
  margin-left: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-gap: 0.5rem;
`;

【讨论】：

【解决方案4】：

您可以使用 .cards-columns 限制一行中的卡片数量

<div class="card-columns">
    <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>
</div>

在 css 中：

.card-columns {
    @include media-breakpoint-only(lg) {
    column-count: 4;
}

【讨论】：

卡片减半。