引导4垂直对齐页脚，同时尊重列和行

Question

我试图找到一个解决方案，如何垂直对齐页脚中的两行，这两行用引导网格放置。

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

在这里小提琴https://codepen.io/pen/WNNPdxv

超文本标记语言

<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="[e-mail]">[e-mail]</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

包装器垂直居中内容的想法是正确的，但是您已经有了一个包装器=

因此，如评论中所建议的，稍微整理一下你的结构，是理解发生了什么的关键。

• 容器是您的包装

<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>

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

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

演示