html - Bootstrap 4 中的 Flexbox 表现得很奇怪

Question

我正在尝试使用 flexbox 垂直对齐一个部分。

这就是我要垂直对齐的内容:

HTML:

<!--Top Hero Section -->
    <div class="d-flex hm-hero justify-content-center">
        <div class="container">
            <div class="row align-items-end">
                <div class="col-12">
                    <h1 class="text-center">Fix Your Problem Today!</h1>
                    <p class="text-center">Start searching for a contractor or company around your area and get your problem fixed in a matter of hours!</p>
                </div>

                <!--Form Section -->
                <div class="col-12">
                    <div class="form-group row justify-content-center">
                        <div class="col-12 col-md-6">
                            <input class="form-control" type="text" value="e.g. plumbing, carpentry" id="example-text-input">
                        </div>
                        <div class="col-12 col-md-4">
                            <input class="form-control" type="text" value="e.g. city name, postcode" id="example-text-input">
                        </div>
                        <div class="col-12 col-md-2">
                            <button type="submit" class="btn btn-primary">Submit</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

关于 CSS，我只应用了这个:

.hm-hero {
    background: url("../img/main_pic.png") no-repeat;
    background-size: fill;
    min-height: 600px;
}

我不明白为什么 flexbox 不工作。我已经尝试了两个类，align-content/items-center 在任何可能的 div 中，但仍然无法正常工作。

因为我有带背景图像的全宽 div，所以它里面是一个容器 div，我试图让它保持垂直。我真的想避免在上面放置 200 像素的边距。这是 Bootstrap 4 错误吗？

Answer 1

我将 align-items-center 类添加到 flex div 父级并且它起作用了。只要您在 .hm-hero 上有高度，内容就会居中。希望这可以帮助。 JSFiddle

.hm-hero {
    background: url("https://placehold.it/960x600") no-repeat;
    background-size: fill;
    min-height: 600px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<!--Top Hero Section -->
    <div class="d-flex hm-hero justify-content-center align-items-center">
        <div class="container">
            <div class="row align-items-end">
                <div class="col-12">
                    <h1 class="text-center">Fix Your Problem Today!</h1>
                    <p class="text-center">Start searching for a contractor or company around your area and get your problem fixed in a matter of hours!</p>
                </div>

                <!--Form Section -->
                <div class="col-12">
                    <div class="form-group row justify-content-center">
                        <div class="col-12 col-md-6">
                            <input class="form-control" type="text" value="e.g. plumbing, carpentry" id="example-text-input">
                        </div>
                        <div class="col-12 col-md-4">
                            <input class="form-control" type="text" value="e.g. city name, postcode" id="example-text-input">
                        </div>
                        <div class="col-12 col-md-2">
                            <button type="submit" class="btn btn-primary">Submit</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>