ナビゲーションバーの右に画像を配置する

Question

ナビゲーションバーの右側に画像を配置できません。

理由を教えてもらえますか？

https://jsfiddle.net/2juzLktc/

<nav class="navbar navbar-inverse navbar-light"> 
<div class="container-fluid" id="div1"> 
<a class="navbar-brand" href="#"><img src="http://www.clker.com/cliparts/T/G/b/7/r/A/red-dot-hi.png" width="150px" height="30px"></a> 
    <ul class="nav navbar-nav navbar-right"> 
    <li><img src="https://cdn.pixabay.com/photo/2017/02/16/10/20/target-2070972_960_720.png" width="10%" id="eye" ></li> 
    </ul> 
</div> 

Answer 1

このような画像にpull-rightクラスを追加すると、画像を右揃えにします。

<ul class="nav navbar-nav navbar-right"> 
    <li><img class="pull-right" src="https://cdn.pixabay.com/photo/2017/02/16/10/20/target-2070972_960_720.png" width="10%" id="eye" ></li> 
</ul> 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<nav class="navbar navbar-inverse navbar-light"> 
 
\t <div class="container-fluid" id="div1"> 
 
\t <a class="navbar-brand" href="#"><img src="http://www.clker.com/cliparts/T/G/b/7/r/A/red-dot-hi.png" width="150px" height="30px"></a> 
 
\t \t <ul class="nav navbar-nav navbar-right"> 
 
\t \t <li><img class="pull-right" src="https://cdn.pixabay.com/photo/2017/02/16/10/20/target-2070972_960_720.png" width="10%" id="eye" ></li> 
 
\t \t </ul> 
 
\t </div> 
 
</nav>

Answer 2

.nav>li { 
 
    text-align:right; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" > 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js"></script> 
 
<script src="/Dashboard/js/indexscript.js"></script> 
 

 
<nav class="navbar navbar-inverse navbar-light"> 
 
\t <div class="container-fluid" id="div1"> 
 
\t <a class="navbar-brand" href="#"><img src="http://www.clker.com/cliparts/T/G/b/7/r/A/red-dot-hi.png" width="150px" height="30px"></a> 
 
\t \t <ul class="nav navbar-nav navbar-right"> 
 
\t \t <li><img src="https://cdn.pixabay.com/photo/2017/02/16/10/20/target-2070972_960_720.png" width="10%" id="eye" ></li> 
 
\t \t </ul> 
 
\t </div> 
 
</nav>

単に李Ypuにtext-align:rightを追加フィドルと

以下のスニペットでそれを確認することができます

Answer 3

フィドル出力ウィンドウには、あまりにもsmall.the float:leftあるので@media (min-width: 768px)。あなたはこれを確認するためにフィドルの出力ウィンドウの幅を広げることができた場合にのみnavbar-rightに追加されます。

Answer 4

これは、imgタグやレイアウトを閉じないと関係している可能性があります。私はimgタグを閉じてインデントを編集し、うまく動作します。次のように試してみてください：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" > 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js"></script> 
<script src="/Dashboard/js/indexscript.js"></script> 

<nav class="navbar navbar-inverse navbar-light"> 
    <div class="container-fluid" id="div1"> 
    <a class="navbar-brand" href="#"> 
     <img src="http://www.clker.com/cliparts/T/G/b/7/r/A/red-dot-hi.png" width="150px" height="30px" /> 
    </a> 
     <ul class="nav navbar-nav navbar-right"> 
      <li> 
      <img src="https://cdn.pixabay.com/photo/2017/02/16/10/20/target-2070972_960_720.png" width="10%" id="eye" /> 
      </li> 
     </ul> 
    </div> 
</nav>