1. 首頁
  2. 問答
  3. Bootstrap NavBar ccs3

Bootstrap NavBar ccs3

2016-02-20 104 views
0

我正在測試bootstrap導航欄，以及我對樣式不太瞭解。當我點擊該圖標，一個虛線框出現在圖像邊界之外，如下：Bootstrap NavBar ccs3

image result

我知道這是關係到頁面風格，但不知道如何解決。下面是我使用的確切代碼：

<!DOCTYPE html> 
<html> 
<head> 
    <link href="css/bootstrap.css" rel="stylesheet"> 
    <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"> 
</head> 
<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
<div class="container"> 
    <div class="navbar-header"> 
    <a class="navbar-brand" href="#"> 
    <img alt="Brand" src="lib/img/mig.png"> 
    </a> 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-navbar-collapse-1"> 
    <span class="sr-only">Toggle navigation</span> 
    </button> 
    <h1 class="navbar-header" href="#">Home</h1> 
    </div> 
    <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="collapse navbar-collapse" id="bs-navbar-collapse-1"> 
    <br> 
    <ul class="nav nav-pills navbar-right"> 
    <li class="active"> 
    <a href="#">Home</a> 
    </li> 
    <li class=""> 
    <a href="#">About</a> 
    </li> 
    <li class=""> 
    <a href="#">Contact</a> 
    </li> 
    <li class=""> 
    <a href="#">Maps</a> 
    </li>  
    </ul> 
    </br> 
    </div> 
    <!-- /.navbar-collapse --> 
</div> 
<!-- /.container --> 
</nav> 
<body> 
</body> 
</html>

來源

2016-02-20 prmas

回答

0

這輪是標準的瀏覽器「鏈接」 要解決你有兩個選擇 - 將其包含在你的標籤

a: active { 
outline: none; 
}

  • 包括具有相同高度的圖像高度

    .navbar品牌{ 高度：60像素; }

幫助過？

來源

2016-02-20 20:03:47

+1

是的，很多。 謝謝！ – prmas

0

嘗試在你的CSS文件中添加此規則

a { 
    outline: none; 
}

來源：css tricks

來源

2016-02-20 19:58:50

0

第一個發佈的答案可能會解決問題，但它也會影響頁面上的每個錨標記，這似乎有點矯枉過正。

我的建議是：

.navbar .navbar-brand:focus { 
    outline: none; 
}

來源

2016-02-20 20:06:20

相關問題

 相關問題