如何让Bootstrap 4导航与标题显示在同一行？

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仅控制文本/背景的颜色和此部分的字体大小。

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

我认为最简单的方法是制作容器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

Answer 3

在float: left上添加h5。

{p}或float: right

上的ul