如何讓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

或float: right我認爲最簡單的方法是使容器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 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> 

您可以參考引導網格選項在這裏https://v4-alpha.getbootstrap.com/layout/grid/#grid-options

Answer 3

在h5添加float: left。在ul