Question

我试图将容器中的两个引导程序列居中对齐并对齐。列在不同的行中。

网格布局为

<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移到容器中，但是可惜它什么也没做。

所以，请帮助我，如何将这些齐平的东西一叠放在屏幕中间？

Answer 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使子项在垂直而非水平方向上渲染和拉伸。

Answer 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

Answer 3

始终通过inner element高度给出高度，如果我将height类元素上的container给出，它将不起作用，所以让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>

希望您会明白这小小的混乱，因此对您有帮助。

水平和垂直居中引导程序连续四列

3 个答案: