Css Bootstrap4卡片组-如何使卡片组适合内容

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

• 卡片组在一列中居中
• 卡片组适合内容宽度（实际上，它总是100%宽度，宽度：自动不会改变任何东西）
• 卡片组中的卡片左对齐

我建立了一个简单的测试代码笔，尝试了很多东西，但从来没有良好的行为。。。 看

波皮奥
波皮奥
波皮奥
波皮奥
波皮奥
波皮奥
波皮奥
波皮奥
波皮奥

难道没有人知道怎么做吗

问候

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

在这里

.wrapper{
左边距：自动；/*这使包装器居中*/
右边距：自动；/*这使包装器居中*/
边框：1px纯蓝色；
宽度：100%；
文本对齐：居中；
}
.卡片{
左侧填充：10px；
右边填充：10px；
最大宽度：240px；
左边距：0px；
右边距：0px；
边界：0px；
显示：内联块；
最小宽度：240px；
}
.卡体{
边框：1px纯黑；
}

波皮奥
波皮奥
波皮奥
波皮奥
波皮奥
波皮奥
波皮奥
波皮奥
波皮奥

你想要实现什么？？？嗨，我希望卡片组适合内容（卡片），而不是全宽。卡片组仍然是100%全宽，它不适合内容。你说的适合内容是什么意思？你能画这个让我知道预期的结果是什么吗？我在我的剪报上加了一张图片。你也可以设置包装为px，例如：900pxHi，thks的答复，但我需要所有卡有一个240像素的宽度。

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