使用引导程序4.3.1时，如何在页面中心放置卡片列？

我试图在嵌套卡片时将card-columns与Bootstrap 4.3.1水平居中。

这是我的卡嵌套方式

 > Main Card
   >> Card-columns
      >>> Card 1  
      >>> Card 2     
      >>> Card 3 
      >>> Card N

我尝试将mx-auto类放置在主卡上和卡栏上，但是没有将卡栏放置在页面的中央。

这是我的代码

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnqq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmvgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>



    <main role="main">
        <div class="container-fluid">
            
          <div class="mx-auto card bg-light">
              <div class="card-body">
                  <h2 class="card-title text-center text-uppercase text-info">Cards</h2>
                  <hr />

                    <div class="card-columns mx-auto">

                        <div class="card text-center">
                          <div class="card-body">
                            <h5 class="card-title">Card 1</h5>
                            <p class="card-text">This card has a regular title and short paragraphy of text below it.</p>
                            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                          </div>
                        </div>

                        <div class="card text-center">
                          <div class="card-body">
                            <h5 class="card-title">Card 2</h5>
                            <p class="card-text">This card has a regular title and short paragraphy of text below it.</p>
                            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                          </div>
                        </div>
                        
                    </div>

              </div>
          </div>

        </div>
    </main>

我创建了a fiddler来演示到目前为止我所做的事情。

如何将卡片列正确放置在屏幕中央？

您需要将容器 div设置为弹性框，然后才能应用所需的引导程序类。

在这种情况下，您需要：
<div class="card-columns mx-auto d-flex justify-content-center col-12">

因此，因为您想将card-columns居中，所以显然justify-content-center可以完成工作。对于您的card-columns宽度，您可以使用bootstrap中的col类。基本上，它提供的最大网格为12列，这将占据整个页面的视图。现在，您可以通过将col-[0 to 12]加到最多12个因为已设置了其父标签，来告诉每张卡需要多少跨度 }。

如果有 col-12 ，则您的卡片最多只能容纳8列。

col-8

card-colums移除嵌套卡片的Flexbox。相反，它变成inline-block，您必须将卡与其他技巧对齐。

https://getbootstrap.com/docs/4.3/components/card/#card-columns

您可以使用card-deck，此时可以放置mx-5而不是auto。这样，每张卡将占用剩余宽度的50％。 mx-auto在这种情况下将无法工作，因为卡片将采用全宽度，将其一分为二，mx-auto将查找剩余宽度并在每侧施加边距。在这种情况下，每张卡将占用50％的空间，因此mx-auto上没有剩余空间。

在嵌套元素获得其各自的宽度之前，将应用mx-5或0到5之间的任何值。

您还可以使用card-deck align-items-center并定义每辆车的宽度。

最后，问题是您试图同时使用内联块和Flex，但您需要做出选择。

使用card-columns无法完成它，但是使用card with fixed with却可以解决

这是一个带有更新代码https://jsfiddle.net/dLbnvatm/的jsFiddle

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>




<main role="main">
    <div class="container-fluid">
        
      <div class="mx-auto card bg-light">
          <div class="card-body">
              <h2 class="card-title text-center text-uppercase text-info">Cards</h2>
              <hr />

                <div class="mx-auto d-flex justify-content-center row">

                    <div class="col-sm-6 col-md-4 col-xl-3 p-1 m-0">
                      <div class="card text-center">
                        <div class="card-body">
                          <h5 class="card-title">Card 1</h5>
                          <p class="card-text">This card has a regular title and short paragraphy of text below it.</p>
                          <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                        </div>
                      </div>
                     </div>
                     

                    <div class="col-sm-6 col-md-4 col-xl-3 p-1 m-0">
                      <div class="card text-center">
                        <div class="card-body">
                          <h5 class="card-title">Card 2</h5>
                          <p class="card-text">This card has a regular title and short paragraphy of text below it.</p>
                          <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                        </div>
                      </div>
                     </div>
                    
                    
                    <div class="col-sm-6 col-md-4 col-xl-3 p-1 m-0">
                      <div class="card text-center">
                        <div class="card-body">
                          <h5 class="card-title">Card 3</h5>
                          <p class="card-text">This card has a regular title and short paragraphy of text below it.</p>
                          <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                        </div>
                      </div>
                     </div>
                    
                    
                    
                    <div class="col-sm-6 col-md-4 col-xl-3 p-1 m-0">
                      <div class="card text-center">
                        <div class="card-body">
                          <h5 class="card-title">Card 4</h5>
                          <p class="card-text">This card has a regular title and short paragraphy of text below it.</p>
                          <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                        </div>
                      </div>
                     </div>
                    
                    
                     <div class="col-sm-6 col-md-4 col-xl-3 p-1 m-0">
                      <div class="card text-center">
                        <div class="card-body">
                          <h5 class="card-title">Card 5</h5>
                          <p class="card-text">This card has a regular title and short paragraphy of text below it.</p>
                          <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                        </div>
                      </div>
                     </div>
                    
                </div>

          </div>
      </div>

    </div>
</main>

使用引导程序4.3.1时，如何在页面中心放置卡片列？

caonidaye001 回答：使用引导程序4.3.1时，如何在页面中心放置卡片列？

大家都在问