使用bootstrap 4.3.1 时如何将卡片栏置于页面中央？

Question

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

这是我的卡片嵌套方式

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

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

这是我的代码

<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 来演示我到目前为止所做的事情。

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

Answer 1

您需要将您的容器 div 设置为 flex-box 然后您可以应用您需要的 bootstrap classes .

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

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

如果有col-8，您的卡片最多只能占用 8 列。

<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 d-flex justify-content-center col-12">



          <div class="card text-center col-4">
            <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 col-4">
            <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>

Answer 2

card-colums 删除嵌套卡片的 flexbox。它变成了 inline-block，您必须将您的卡片与其他技巧对齐。

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

你可以做的是使用 card-deck，此时你可以输入 mx-5 而不是自动。这样每张卡片将占据剩余宽度的 50%。 mx-auto 在这种情况下不起作用，因为卡片将占据整个宽度，将其一分为二，mx-auto 将寻找剩余的宽度并在每一侧应用边距。在这种情况下，卡片将各占 50%，因此没有 space 留给 mx-auto。

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

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

最后，问题是你想同时使用inline-block和flex，但你需要做出选择。

使用bootstrap 4.3.1 时如何将卡片栏置于页面中央？

How to place card-columns in the center of the page when using bootstrap 4.3.1?

css

bootstrap-4

bootstrap-cards

bootstrap-4.1.x