【问题标题】: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/rHe6rq5L76Bootstrap 4.1 的更新演示)

    【讨论】:

    【解决方案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;
      }
      

      更多https://v4-alpha.getbootstrap.com/components/card/#decks

      【讨论】:

      • 卡片减半。
      猜你喜欢
      • 2020-07-24
      • 2018-03-21
      • 2022-06-10
      • 1970-01-01
      • 2018-07-15
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-02-26
      相关资源
      最近更新 更多