[英]How to place card-columns in the center of the page when using bootstrap 4.3.1?
I am trying to horizontally-center acard-columns withBootstrap 4.3.1 while nesting cards.我正在尝试在嵌套卡片时使用Bootstrap 4.3.1将卡片列水平居中。
Here is how my cards are nested这是我的卡片的嵌套方式
> Main Card
>> Card-columns
>>> Card 1
>>> Card 2
>>> Card 3
>>> Card N
I tried to place mx-auto
class on the main-card and on the card-columns but that did not place the card-columns to the center of the page.我试图将
mx-auto
class 放在主卡和卡列上,但这并没有将卡列放在页面的中心。
Here is my code这是我的代码
<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>
I created a fiddler to demo what I have done so far.我创建了一个提琴手来演示我到目前为止所做的事情。
How can I correctly place the card-column in the center of the screen?如何正确地将卡片列放置在屏幕中央?
You need to set your container div
as a flex-box and then you can apply the bootstrap classes you need.您需要将容器
div
设置为 flex-box,然后您可以应用所需的引导类。
In this case, you want:在这种情况下,您需要:
<div class="card-columns mx-auto d-flex justify-content-center col-12">
So because you want to center your card-columns
, it's clear that justify-content-center
does the job.因此,因为您想将
card-columns
居中,很明显justify-content-center
可以完成这项工作。 For your card-columns
width, you can play with the class col
from bootstrap .对于您的
card-columns
宽度,您可以使用bootstrap中的 class col
。 Basically, it offers a maximum grid of 12 columns and that would take the whole page's view.基本上,它提供了最多 12 列的网格,这将占据整个页面的视图。 And now you can then tell each card how many col-span you need them to take by adding
col-[0 to 12]
to up to a maximum of 12 because you have set their parent tag col-12
.现在,您可以通过将
col-[0 to 12]
添加到最多 12 来告诉每张卡需要多少 col-span,因为您已经设置了它们的父标签col-12
。
If it had col-8
instead, your cards could only take up to a maximum of 8 columns.如果它有
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
remove the flexbox of your nested cards. card-colums
删除嵌套卡片的 flexbox。 It become inline-block
instead and you must align your card with other tricks.它变成
inline-block
,你必须将你的卡与其他技巧对齐。
https://getbootstrap.com/docs/4.3/components/card/#card-columns https://getbootstrap.com/docs/4.3/components/card/#card-columns
What you can do is using card-deck
and at this point you can put an mx-5
instead of auto.您可以做的是使用
card-deck
,此时您可以放置mx-5
而不是 auto。 This way each cards will take 50% of the remaining width.这样每张卡片将占用剩余宽度的 50%。 The mx-auto won't work in this case because the cards will take the full width, splitting it in two, the the
mx-auto
will look for the remaining width and apply a margin on each side.在这种情况下,mx-auto 将不起作用,因为卡片将占据整个宽度,将其分成两部分,
mx-auto
将查找剩余宽度并在每一侧应用边距。 In this case, the cards will take 50% each, so no space left for the mx-auto
.在这种情况下,每张卡片将占用 50%,因此没有空间留给
mx-auto
。
The mx-5
or anything from 0 to 5 is apply before the nested element get their respective width. mx-5
或从 0 到 5 的任何值在嵌套元素获得它们各自的宽度之前应用。
You can also use card-deck align-items-center
and define the width of each cars.您还可以使用
card-deck align-items-center
并定义每辆车的宽度。
Finally , the problem is you are trying to use inline-block and flex together, but you need to make a choice.最后,问题是您尝试将 inline-block 和 flex 一起使用,但您需要做出选择。
I could not get it done with using card-columns
but I got it close using card with fixed with
我无法使用
card-columns
完成它,但我使用card with fixed with
完成了它
Here is a jsFiddle with an updated code https://jsfiddle.net/dLbnvatm/这是一个带有更新代码的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.