css - 使用bootstrap 4.3.1时如何将卡片栏放置在页面中央？

Question

我正在尝试将 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演示我到目前为止所做的事情。

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

Answer 1

您需要设置您的容器 div作为 flex 盒，然后您可以应用您需要的引导类。

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

因为你想将 card-columns 居中，很明显justify-content-center做这个工作。 为您card-columns宽度，可以和类(class)一起玩col来自bootstrap 。基本上，它提供最多 12 列的网格，这将占据整个页面的 View 。现在，您可以通过添加 col-[0 to 12] 来告诉每张卡您需要它们采取多少列跨度。最多 12 个因为您已设置其父标签 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>