水平和垂直居中引导连续行中的 4 列
Posted
技术标签:
【中文标题】水平和垂直居中引导连续行中的 4 列【英文标题】：Horizontally and vertically center bootstrap 4 columns in consecutive rows 【发布时间】：2019-07-10 03:45:34 【问题描述】：我试图简单地居中对齐并对齐容器内的两个引导列。这些列位于不同的行中。
网格布局是
<body style="height: 100vh;">
<div class="container">
<div class="row">
<div class="col-6">
<div class="card">
hello
</div>
</div>
</div>
<div class="row">
<div class="col-4">
<div class="card">
world
</div>
</div>
</div>
</div>
</body>
这些卡片只是用来勾勒容器的轮廓。
我知道有很多关于垂直对齐的问题，我可能错过了包含我需要的答案的问题。但我对他们中的大多数人的看法是，父母需要有一定的身高。 如果您只有一行，则以下内容可以正常工作，因为您可以将列居中在 100% 高度行中。但是如果你有两行，那就不太好了，因为每一列都以自己的行为中心，而每一行都是窗口的高度。
<body style="height: 100vh;">
<div class="container h-100">
<div class="row h-100 justify-content-center align-items-center">
<div class="col-6">
<div class="card">
hello
</div>
</div>
</div>
<div class="row h-100 justify-content-center">
<div class="col-4">
<div class="card">
world
</div>
</div>
</div>
</div>
</body>
我希望我可以将 justify-content-center align-items-center 移动到容器中，但可惜这似乎没有任何作用。
那么，请帮帮我，我怎样才能将这些同花顺放在屏幕中间，一个在另一个之上？
【问题讨论】：
总是通过inner element给出高度
【参考方案1】：
这是使用 Bootstrap 内置的 flexbox 实现此目的的好方法。
<div class="container d-flex h-100 flex-column">
<div class="flex-grow-1"></div>
<div class="row justify-content-center">
<div class="col-3">
<div class="card">ITEM A</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-3">
<div class="card">ITEM B</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-3">
<div class="card">ITEM C</div>
</div>
</div>
<div class="flex-grow-1"></div>
</div>
我们有两个缓冲 flex 行，带有 flex-grow-1。这些行中的每一行都将扩展（具有相同的权重）以平均填充顶部和底部。中间的每一行内容都有其内容的高度。
最终结果是 ITEM 卡片在屏幕上垂直和水平居中。因为它们位于单独的行中，所以您可以根据需要调整边距/填充（默认情况下，它们会垂直地彼此相邻。
Example screenshot of the above code in bootstrap
您可以使用一行 + 列和一个内部 flexbox 来执行此操作，但这使您无法控制各个卡片之间的关系。
编辑：d-flex 使容器成为围绕其子行的 flex 容器，而 flex-column 使子级渲染和拉伸垂直而不是水平。
【讨论】：
【参考方案2】：最简单的解决方案是将行的高度设为 50%...
<body style="height: 100vh;">
<div class="container h-100">
<div class="row h-100 justify-content-center align-items-center">
<div class="col-6">
<div class="card">
hello
</div>
</div>
</div>
<div class="row h-100 justify-content-center align-items-center">
<div class="col-4">
<div class="card">
world
</div>
</div>
</div>
</div>
</body>
演示：https://www.codeply.com/go/7POJtgNaQI
或者， flexbox 方法是使用 Bootstrap flex-grow-1 类。你也不需要身体的高度。只需在容器上使用min-vh-100...
<div class="container d-flex flex-column min-vh-100">
<div class="row flex-grow-1 justify-content-center align-items-center">
<div class="col-6">
<div class="card">
hello
</div>
</div>
</div>
<div class="row flex-grow-1 justify-content-center align-items-center">
<div class="col-4">
<div class="card">
world
</div>
</div>
</div>
</div>
https://www.codeply.com/go/n1eL2Jakuo
【讨论】：
【参考方案3】：总是通过inner element 高度给出高度，如果我在container 类元素上给出height，它将不起作用，所以让container 依赖于inner element's 高度，所以试试这样。
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container mt-3">
<div class="col-12" style="min-height: 180px;">
<div
class="row bg-success position-absolute w-100 h-100 d-flex flex-row justify-content-center align-items-center">
<div class="col-6 pr-2">
<div class="card text-center">
hello
</div>
</div>
<div class="col-6 pl-2">
<div class="card text-center">
world
</div>
</div>
</div>
</div>
</div>希望你能理解这个小小的混乱，所以它会对你有所帮助。
【讨论】：
这会将两列并排放置在同一行内。我这样做没有问题。我正在寻找的是一个在另一个之上，最好是在不同的行中。 这很简单，但是你之前没有提到这个场景 我在我的帖子和标题中多次明确指定一个在另一个之上和不同行中。但是，如果您认为我可以通过某种方式使问题更清楚，请告诉我，我会更新它。 亲爱的 kag0，您没有提到上面的断点行为，并且您在 4 天后到达您的帖子以进行更新，总体而言，在 card div 'col-12 col- 上方进行此更改md-6 pr-2 px-md-3' 和 pl-2 类线也一样....希望对您有所帮助。以上是关于水平和垂直居中引导连续行中的 4 列的主要内容，如果未能解决你的问题，请参考以下文章