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无法正常工作。我已经尝试了两个类，对齐内容/项目中心，无论可能的div，仍然无法让它工作。

所以，因为我有背景图像的全宽度div，里面是一个容器div，我试图让它保持垂直。我真的想避免将200px的利润率放在首位。这是一个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>

Bootstrap 4中的Flexbox表现得很奇怪

1 个答案: