时间戳

首页 > 解决方案 > Bootstrap4 卡片组 - 如何让卡片组适合内容

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

问题描述

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

我构建了一个简单的代码笔进行测试，尝试了很多东西，但从来没有好的行为......见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>

没有人知道该怎么做吗？

问候。

- - - 编辑 - - -

有图片:)

标签： cssbootstrap-4flexboxbootstrap-cards

解决方案

这里是。

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

推荐阅读