水平和垂直中心引导连续行中的4列

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

您可以使用一行+列和一个内部弹性框来执行此操作，但这样可以减少对各个卡相对于彼此的显示方式的控制。

编辑：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>

但是：Kua zxsw指出

或者，flexbox方法将使用Bootstrap flex-grow-1类。你也不需要身体的高度。只需在容器上使用https://www.codeply.com/go/7POJtgNaQI ......

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>

Answer 3

总是通过https://www.codeply.com/go/n1eL2Jakuo高度给出高度，如果我将在inner element类元素上给height，它将无法工作，所以让container依赖于container高度，所以试试这样。

inner element's

希望你能理解这个小小的混乱，所以它会对你有所帮助。

水平和垂直中心引导连续行中的4列

问题描述投票：-1回答：3

3个回答

最新问题

水平和垂直中心引导连续行中的4列

问题描述 投票：-1回答：3

3个回答

最新问题

问题描述投票：-1回答：3