Bootstrap Bild in Navigationsleiste ausrichten rechts

Question

Ich kann ein Bild auf der rechten Seite der Navigationsleiste nicht ausrichten.

Können Sie mir sagen, warum?

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

Fügen Sie pull-right Klasse zu Ihrem Bild wie folgt hinzu und es wird das Bild rechts ausrichten.

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

einfach text-align:right zu li Ypu hinzufügen kann es auf Geige überprüfen und das Snippet unten

https://jsfiddle.net/anmolsandal/2juzLktc/3/

Answer 3

weil die Geige Ausgabefenster ist auch small.The float:left-navbar-right hinzugefügt werden, nur wenn @media (min-width: 768px) .Sie die Breite der Geige Ausgabefenster erstrecken kann, dies zu überprüfen.

Answer 4

Es könnte etwas damit zu tun haben, die IMG-Tags oder das Layout nicht zu schließen. Ich habe die Tags img geschlossen und die Einrückung bearbeitet und es funktioniert gut. Versuchen Sie etwas wie dieses:

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