右のブートストラップの調整navbarsupportedcontent

Question

ナビゲーションバーのサポートされているさまざまなコンテンツを画面の右側に配置する方法を複数試しましたが、ロゴの横に固執しています。 は、誰かがアイデアなぜ...

<nav class="navbar navbar-expand-lg navbar-light bg-light"> 
<a class="navbar-brand" href="#"> 
<img src="icone.png" width="38" height="30" class="d-inline-block align-top" 
alt="sharkstein"> Sharkson & Vonstein 
</a> 

<div class="collapse navbar-collapse" id="navbarSupportedContent"> 
<ul class="navbar-nav mr-auto" id="navbarSupportedContentList"> 
    <li class="nav-item active"> 
    <a class="nav-link" href="index.html">Home <span class="sr-only">(current) 
</span></a> 
    </li> 
    <li class="nav-item"> 
    <a class="nav-link" href="blog.html">Blog</a> 
    </li> 
</div> 
</nav> 

とCSSを持っています、私はまたSupportedContentListで試してみたし、クラス

#navbarSupportedContent { 
display: inline-block; 
margin-right: auto; 
float: right; 
text-align: right; 
} 

Answer 1

であなたはフレキシボックスでそれを行うことができます。

* {margin:0;padding:0;box-sizing:border-box} 
 
html, body {width:100%} 
 

 
.navbar { 
 
    display: flex; /* displays children inline */ 
 
    justify-content: space-between; /* children are evenly distributed, first child is on the left side, last child on the right side */ 
 
} 
 

 
ul { 
 
    list-style: none; 
 
}

<nav class="navbar navbar-expand-lg navbar-light bg-light"> 
 
    <a class="navbar-brand" href="#"><img src="icone.png" width="38" height="30" class="d-inline-block align-top" alt="sharkstein">Sharkson & Vonstein</a> 
 
    <div class="collapse navbar-collapse" id="navbarSupportedContent"> 
 
    <ul class="navbar-nav mr-auto" id="navbarSupportedContentList"> 
 
     <li class="nav-item active"> 
 
     <a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a> 
 
     </li> 
 
     <li class="nav-item"> 
 
     <a class="nav-link" href="blog.html">Blog</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</nav>