[英]How to place card-columns in the center of the page when using bootstrap 4.3.1?
我正在嘗試在嵌套卡片時使用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>
我創建了一個提琴手來演示我到目前為止所做的事情。
如何正確地將卡片列放置在屏幕中央?
您需要將容器div
設置為 flex-box,然后您可以應用所需的引導類。
在這種情況下,您需要:
<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>
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
並定義每輛車的寬度。
最后,問題是您嘗試將 inline-block 和 flex 一起使用,但您需要做出選擇。
我無法使用card-columns
完成它,但我使用card with fixed with
完成了它
這是一個帶有更新代碼的jsFiddle https://jsfiddle.net/dLbnvatm/
<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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.