如何让 Bootstrap 4 导航与标题出现在同一行？答案

【问题标题】：How do I get a Bootstrap 4 nav to appear on the same line as a header?如何让 Bootstrap 4 导航与标题出现在同一行？
【发布时间】：2017-06-08 01:28:45
【问题描述】：

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

现在的样子

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

这是我当前的代码：

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

【问题讨论】：

你的css在哪里

标签： html css twitter-bootstrap nav bootstrap-4

【解决方案1】：

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

【讨论】：

【解决方案2】：

你可以使用这样的东西

<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 Grid Options https://v4-alpha.getbootstrap.com/layout/grid/#grid-options

【讨论】：

【解决方案3】：

在h5 上添加float: left。

或float: rightul

【讨论】：