メニューアラインアイテムを右揃え

Question

私はすべてのnavアイテムを右揃えにする必要があるこのメニューを持っています。 私はposition、float、right：0で再生しようとしましたが、何も動作していないようです。

<nav class="navbar navbar-inverse navbar-fixed-top navbar-toggleable-md"> 
     <div class="container" style="background-color:#ff6a00;padding:22px;position:relative;"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggler navbar-toggler-right" style="position:absolute;top:46px" data-toggle="collapse" data-target="#navbarFullCollapse"> 
        <span class="navbar-toggler-icon"></span> 
       </button> 
       <a asp-controller="Home" asp-action="Index" class="navbar-brand"><h1>Artist Name</h1></a> 
      </div> 
      <div class="navbar-collapse collapse" style="position:relative;right:0px;"> 
       <div class="navbar-nav"> 
        <a class="nav-item nav-link" asp-controller="Home" asp-action="Overviev">Oveview</a> 
        <a class="nav-item nav-link" asp-controller="Home" asp-action="Grafiti">Grafitti</a> 
        <a class="nav-item nav-link" asp-controller="Home" asp-action="Digital">Digital</a> 
        <a class="nav-item nav-link" asp-controller="Home" asp-action="Pencil">Pencil</a> 
        <a class="nav-item nav-link" asp-controller="Home" asp-action="Graphic">Graphics</a> 
        <a class="nav-item nav-link" asp-controller="Home" asp-action="Mase">Mase</a> 
        <a class="nav-item nav-link" asp-controller="Home" asp-action="GrandCentral">Grand Central</a> 
        <a class="nav-item nav-link" asp-controller="Home" asp-action="Painting">Painting</a> 
        <a class="nav-item nav-link" asp-controller="Home" asp-action="Mjau">Mjau</a> 
        <a class="nav-item nav-link" asp-controller="Home" asp-action="Misc">Misc</a> 
       </div> 
      </div> 
     </div> 
    </nav> 

Answer 1

navアイテムの親にjustify-content-endヘルパークラスを使用してください。これはフレックスの子をフレックス列の主軸の端に揃えます。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<nav class="navbar navbar-inverse navbar-fixed-top navbar-toggleable-md"> 
 
    <div class="container" style="background-color:#ff6a00;padding:22px;position:relative;"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggler navbar-toggler-right" style="position:absolute;top:46px" data-toggle="collapse" data-target="#navbarFullCollapse"> 
 
        <span class="navbar-toggler-icon"></span> 
 
       </button> 
 
     <a asp-controller="Home" asp-action="Index" class="navbar-brand"><h1>Artist Name</h1></a> 
 
    </div> 
 
    <div class="navbar-collapse collapse justify-content-end" style="position:relative;right:0px;"> 
 
     <div class="navbar-nav"> 
 
     <a class="nav-item nav-link" asp-controller="Home" asp-action="Overviev">Oveview</a> 
 
     <a class="nav-item nav-link" asp-controller="Home" asp-action="Grafiti">Grafitti</a> 
 
     <a class="nav-item nav-link" asp-controller="Home" asp-action="Digital">Digital</a> 
 
     <a class="nav-item nav-link" asp-controller="Home" asp-action="Pencil">Pencil</a> 
 
     <a class="nav-item nav-link" asp-controller="Home" asp-action="Graphic">Graphics</a> 
 
     <a class="nav-item nav-link" asp-controller="Home" asp-action="Mase">Mase</a> 
 
     <a class="nav-item nav-link" asp-controller="Home" asp-action="GrandCentral">Grand Central</a> 
 
     <a class="nav-item nav-link" asp-controller="Home" asp-action="Painting">Painting</a> 
 
     <a class="nav-item nav-link" asp-controller="Home" asp-action="Mjau">Mjau</a> 
 
     <a class="nav-item nav-link" asp-controller="Home" asp-action="Misc">Misc</a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</nav>