如何让 Bootstrap 4 导航与 header 出现在同一行？

Question

在这里你可以看到它现在的样子。

现在的样子

如何让导航显示在屏幕右侧，同时使其与版权在同一行？到目前为止，我似乎无法让我在这里看到的任何东西发挥作用。

这是我当前的代码：

<div class="container-fluid footer">
    <div class="spacer"></div>
    <div class="container">
        <h5 style="display: inline">Copyright © 2017 Custom Prop Shop</h5>
        <ul class="nav flex-column flex-sm-row justify-content-end pull-right">
            <li class="nav-item">
                <a class="nav-link" href="request-estimate.html">Request an Estimate</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="our-work.html">Our Work</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="our-clients.html">Our Clients</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="our-story.html">Our Story</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="contact.html">Contact</a>
            </li>
        </ul>
    </div>
    <div class="spacer"></div>
</div>

CSS 只控制 text/background 和 font-size 这部分的颜色。

Answer 1

你可以使用这样的东西

<div class="container-fluid footer">
    <div class="spacer"></div>
    <div class="container">
        <div class="row">
            <div class="col">
                <h5 style="display: inline">Copyright © 2017 Custom Prop Shop</h5>
            </div>
            <div class="col">
                <ul class="nav flex-column flex-sm-row justify-content-end pull-right">
                    <li class="nav-item">
                        <a class="nav-link" href="request-estimate.html">Request an Estimate</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="our-work.html">Our Work</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="our-clients.html">Our Clients</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="our-story.html">Our Story</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="contact.html">Contact</a>
                    </li>
                </ul>
            </div>
        </div>        
    </div>
    <div class="spacer"></div>
</div>

您可以在此处参考 Bootstrap 网格选项 https://v4-alpha.getbootstrap.com/layout/grid/#grid-options

Answer 2

在 h5 上添加 float: left。

或 float: right 在 ul

Answer 3

我认为最简单的方法是制作容器 d-flex，然后使用 my-auto 将 h5...

垂直居中

<div class="container d-flex justify-content-between">
        <h5 class="my-auto">Copyright © 2017 Custom Prop Shop</h5>
        <ul class="nav flex-column flex-sm-row">..</ul>
</div>

https://www.codeply.com/go/1WWhy3uP9C

如何让 Bootstrap 4 导航与 header 出现在同一行？

How do I get a Bootstrap 4 nav to appear on the same line as a header?

html

css

nav

twitter-bootstrap

bootstrap-4