2

我正在尝试在嵌套卡片时使用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>

我创建了一个提琴手来演示我到目前为止所做的事情。

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

4

2 回答 2

2

您需要将容器 div设置为弹性盒，然后您可以应用所需的引导类。

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

因此，因为您想将 . 居中card-columns，所以很明显可以justify-content-center完成这项工作。对于您的card-columns宽度，您可以使用colbootstrap中的类。基本上，它提供了最多 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>

于 2019-11-14T18:16:53.373 回答
0

card-colums移除嵌套卡片的弹性盒。相反，inline-block您必须将您的卡与其他技巧对齐。

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

你可以做的是使用card-deck，此时你可以放一个mx-5而不是自动。这样每张卡片将占用剩余宽度的 50%。在这种情况下，mx-auto 将不起作用，因为卡片将占据整个宽度，将其分成两部分，然后mx-auto将查找剩余宽度并在每一侧应用边距。在这种情况下，每张卡片将占用 50%，因此没有空间留给mx-auto.

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

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

最后，问题是您尝试将 inline-block 和 flex 一起使用，但您需要做出选择。

于 2019-11-14T20:04:27.857 回答