引导对齐导航栏右侧的图像

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>

- greencucumber1

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">
 <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 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>
 </div>
</nav>

- Phani Kumar M

Answer 2

这可能与未关闭 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>

- Thomas Allen

Answer 3

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

只需在li中添加text-align:right即可。您可以在fiddle上查看它以及下面的片段。

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

- Anmol Sandal

Answer 4

因为 Fiddle 输出窗口太小了。只有在 @media (min-width: 768px) 的情况下，float:left 才会被添加到 navbar-right 中。您可以扩展 Fiddle 输出窗口的宽度来验证此操作。

- amow