Bootstrap在導航欄中對齊圖像right

你能告訴我爲什麼嗎？

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

來源

2017-09-22 greencucumber1

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

來源

2017-09-22 10:36:37

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

只需添加text-align:right李YPU可以查看它的小提琴及以下

片斷

來源

2017-09-22 10:35:57

因爲小提琴輸出窗口過small.the float:left將被添加到navbar-right只有當@media (min-width: 768px)。您可以延伸小提琴輸出窗口的寬度來驗證這一點。

來源

2017-09-22 10:39:31 amow

這可能與不關閉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>

來源

2017-09-22 10:41:30

Bootstrap在導航欄中對齊圖像right

回答

相關問題