Bootstrap4 卡片组 - 如何让卡片组适合内容答案

【问题标题】：Bootstrap4 card-deck - how to have card-deck fits contentBootstrap4 卡片组 - 如何让卡片组适合内容
【发布时间】：2021-02-26 20:45:27
【问题描述】：

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

卡片组在列中居中
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>

没有人知道怎么做吗？

问候。

----- 编辑-----

With a picture :)

【问题讨论】：

你想达到什么目的？？？
嗨，我希望卡片组适合内容（卡片），而不是全宽。

标签： css bootstrap-4 flexbox bootstrap-cards

【解决方案1】：

在这里。

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

【讨论】：

卡片组仍然是 100% 全宽，不适合内容
拟合内容是什么意思？你能把这个画出来让我知道预期的结果是什么吗？
我在我的问题中添加了一张图片
更新了截图。您也可以将包装器设置为 px 例如：900px
您好，感谢您的回复，但我需要所有卡片的宽度为 240 像素。