css - Bootstrap 4 在尊重列和行的同时垂直对齐页脚

Question

我正在尝试找到一种解决方案，如何垂直对齐页脚中放置有 Bootstrap 网格的 2 行。

我已经尝试为内容制作一个包装器并应用常规的 flexbox 解决方案:显示: flex ；对齐元素:居中。但这会将两行移动到同一行。

在这里 fiddle https://codepen.io/pen/WNNPdxv

HTML

<footer class="footer">
        <div class="footer-wrapper">
            <div class="container">
                <div class="row row">
                    <div class="col-sm-8 footer-credit">
                        <h6>GetMove</h6>
                        <p>Copyright &copy 2019 GetMove All Rights Reserved</p>
                    </div>
                    <div class="col-sm-2 footer-contact">
                        <h6>Contact</h6>
                        <a href="hola@getmove.net">hola@getmove.net</a>
                    </div>
                    <div class="col-sm-2 footer-social-icons">
                        <h6>Follow us</h6>
                        <a class="social-icon" target="_blank" href="https://www.facebook.com/pg/GetMove.Official/"
                            ><i class="fab fa-facebook-square"></i
                        ></a>
                        <a class="social-icon" target="_blank" href="https://www.instagram.com/getmovemx/"
                            ><i class="fab fa-instagram"></i
                        ></a>
                        <a class="social-icon" target="_blank" href="https://soundcloud.com/getmove"
                            ><i class="fab fa-soundcloud"></i
                        ></a>
                    </div>
                </div>
            </div>
            <div class="container">
                <div class="row">
                    <div class="col-sm-8 text-center"></div>
                    <div class="col-sm-4 footer-newsletter">
                        <h6>Subscribe</h6>
                        <div class="input-group input-group-sm mb-3">
                            <input
                                type="text"
                                class="form-control shadow-none"
                                id="subscribe"
                                placeholder="@ Enter your email adress"
                                aria-label="Sizing example input"
                                aria-describedby="inputGroup-sizing-sm"
                            />
                            <div class="input-group-append">
                                <button class="btn btn-outline-secondary" type="button" id="button-addon1">
                                    Submit
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="container footer-credit">
                <div class="row">
                    <div class="col-sm-8"></div>
                    <div class="col-sm-4 footer-credit"></div>
                </div>
            </div>
        </div>
    </footer>

CSS

.footer {
    width: 100%;
    height: 24em; /* Set the fixed height of the footer here */
    background-color: #f4f2f0;
    margin-top: 4em;
}

.footer-social-icons {
    list-style-type: none;
}

.footer h6 {
    text-transform: uppercase;
    font-size: 16px;
}

.footer-credit {
    font-size: 11px;
}

.social-icon {
    /* display: block; */
    margin: 0;
    font-size: 16px;
}

.form-control:focus {
    border-color: black;
}

Answer 1

将内容垂直居中的包装器的想法是正确的，但是您已经有了一个包装器 => container。
无需在单个部分(页脚)内放置多个容器。您为此使用行。

因此，按照评论中的建议，稍微清理一下您的结构，是理解正在发生的事情的关键。

• container 是你的包装器
• row row 是多余的
• flexbox (bootstrap 4) 不需要空列作为占位符，不确定这是不是发生了什么...... => m-auto, ml-auto , mr-自动
• 将自定义类放在列中(这些 block 有一天可能会改变位置，尤其是在为 CMS 设计时)
• 保持结构清洁并用utility classes装饰如果需要(填充、边距……)

HTML 结构

<footer role="contentinfo">
    <div class="container">
        <div class="row">
            <div class="col-sm-7"></div>
            <div class="col-sm-3"></div>
            <div class="col-sm-2"></div>
        </div>
        <div class="row">
            <div class="col-sm-5 ml-auto"></div>
        </div>
        <div class="row">
            <div class="col-sm-5 ml-auto"></div>
        </div>
    </div>
</footer>

解决方案

现在您的 height 已设置在页脚上，您的容器只是在空间内占据所需的高度。这意味着您现在应该能够使用 flexbox 垂直移动它。

footer[role="contentinfo"] {
    display: flex;
    flex-flow: column wrap;
    justify-content: center; /* content of the footer is the container */
}

DEMO