Comment puis-je faire apparaître un mot de passe Bootstrap 4 sur la même ligne qu'un en-tête?

Question

Ici vous pouvez voir à quoi il ressemble en ce moment.

Qu'est-ce qu'il ressemble maintenant

Comment puis-je obtenir le nav apparaisse sur le côté droit de l'écran tout en faisant ce soit sur la même ligne que le droit d'auteur? Je n'arrive pas à faire quoi que ce soit au travail que j'ai vu jusqu'ici.

Voici mon code actuel:

<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 est seulement contrôler la couleur du texte/arrière-plan et la taille de la police pour cette partie.

Answer 1

Je pense que la meilleure façon serait de rendre le récipient d-flex, puis utiliser my-auto pour centrer verticalement la 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

Vous pouvez utiliser quelque chose comme ça

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

Vous pouvez faire référence Bootstrap Options de la grille ici https://v4-alpha.getbootstrap.com/layout/grid/#grid-options

Answer 3

ajouter float: left sur le h5.

ou float: right sur le ul