Bootstrap 4 垂直对齐不起作用

Question

我正在为我正在制作的 Electron 应用程序制作一个非常简单的表格来试验该软件，但是，我坚持最基本的事情......界面设计。

我在我的界面中使用 Bootstrap 4 并尝试将表单垂直居中，但是，我使用针对同一主题的其他问题提出的各种建议得到混合结果。它们要么不起作用，要么将我所有的内容都压缩到一行中，通常会弄乱当前的布局。

关于如何垂直对齐下方容器中的项目有什么建议吗？

<!-- Search Field -->
<div class="container">
    <div class="row justify-content-center">
        <div class="col-sm-auto">
            <h1 class="text-white">Shorten M' URL!</h1>
        </div>
    </div>
    <div class="row justify-content-center">
        <div class="col-sm-6">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="Enter URL...">
                <span class="input-group-btn">
            <button class="btn btn-primary" type="button">Shorten!</button>
        </span>
            </div>
        </div>
    </div>
</div>

Answer 1

你在找这个吗?:

.vh-100 {
    height: 100vh;
}

<div class="container vh-100 bg-dark">
    <div class="row vh-100 justify-content-center align-items-center">
        <div class="col-6 text-center">
            <h1 class="text-white">Shorten M' URL!</h1>
            <br>
            <div class="input-group">
                <input type="text" class="form-control" placeholder="Enter URL...">
                <span class="input-group-btn">
                    <button class="btn btn-primary" type="button">Shorten!</button>
                </span>
            </div>
        </div>
    </div>
</div>
        
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>

基本上你必须让容器适应屏幕高度。在那里，您可以垂直对齐它的项目。

Bootstrap 4 垂直对齐不起作用

Bootstrap 4 Vertical Align not working

css

vertical-alignment

bootstrap-4