0

我尝试以这种方式使用带有卡片的卡片组：

  • 卡片组以列为中心
  • card-deck 适合内容宽度（实际上，它总是 100% 宽度，宽度：auto 不会改变任何东西）
  • 卡片组内的卡片是左对齐的

我构建了一个简单的代码笔进行测试，尝试了很多东西，但从来没有好的行为......见https://codepen.io/studio-matavai/pen/zYBeQOX

<div class="row">
      <div class="col-12">
         <div class="card-deck">
            <div class="card">
                <div class="card-body">
                  poipoipio
                </div>
            </div>
           <div class="card">
                <div class="card-body">
                  poipoipio
                </div>
            </div>
           <div class="card">
                <div class="card-body">
                  poipoipio
                </div>
            </div>
           <div class="card">
                <div class="card-body">
                  poipoipio
                </div>
            </div>
           <div class="card">
                <div class="card-body">
                  poipoipio
                </div>
            </div>
           <div class="card">
                <div class="card-body">
                  poipoipio
                </div>
            </div>
           <div class="card">
                <div class="card-body">
                  poipoipio
                </div>
            </div>
           <div class="card">
                <div class="card-body">
                  poipoipio
                </div>
            </div>
           <div class="card">
                <div class="card-body">
                  poipoipio
                </div>
            </div>
         </div>
      </div>
    </div>

没有人知道该怎么做吗？

问候。

- - - 编辑 - - -

有图片:)

4

1 回答 1

0

这里是。

.wrapper {
    margin-left: auto;/*this makes wrapper center*/
    margin-right: auto;/*this makes wrapper center*/
    border:1px solid blue;
    width:100%;
    text-align:center;
    }

.card {
padding-left: 10px;
    padding-right: 10px;
    max-width: 240px;
    margin-left: 0px;
    margin-right: 0px;
    border: 0px;
    display: inline-block;
    min-width: 240px;
}

.card-body{
  border:1px solid black;
}
<html>
  <head>
  </head>
  <body>
    <div class="row">
      <div class="col-12">
         <div class="wrapper">
            <div class="card">
                <div class="card-body">
                  poipoipio
                </div>
            </div>
           <div class="card">
                <div class="card-body">
                  poipoipio
                </div>
            </div>
           <div class="card">
                <div class="card-body">
                  poipoipio
                </div>
            </div>
           <div class="card">
                <div class="card-body">
                  poipoipio
                </div>
            </div>
           <div class="card">
                <div class="card-body">
                  poipoipio
                </div>
            </div>
           <div class="card">
                <div class="card-body">
                  poipoipio
                </div>
            </div>
           <div class="card">
                <div class="card-body">
                  poipoipio
                </div>
            </div>
           <div class="card">
                <div class="card-body">
                  poipoipio
                </div>
            </div>
           <div class="card">
                <div class="card-body">
                  poipoipio
                </div>
            </div>
           
         </div>
      </div>
    </div>
  </body>
</html>

于 2020-11-15T13:33:22.270 回答