無法居中導航欄項目和懸停標記

我在將項目置於自舉導航欄中時遇到問題。我目前正在使用引導3. 我看了很多帖子，並嘗試了所有我能想到的，但沒有任何工作。我也試圖用'懸停'在項目頂部出現一條藍線，但我無法讓它變小。這是我的代碼。無法居中導航欄項目和懸停標記

.navbar 
 
{ 
 
    background-color: transparent; \t 
 
    padding-top: 30px; 
 
    /* border: 0; */ 
 
} 
 

 

 
.navbar a 
 
{ 
 
    font-size: 15px; 
 
    color: black; 
 
    text-transform: uppercase; 
 
    font-family: Ruda, sans-serif; 
 
} 
 

 
.navbar-brand 
 
{ 
 
    max-height: 40px; 
 
} 
 

 
.navbar-nav > li { 
 
    display: inline-block; 
 
    float:none; 
 
    padding-right:80px; 
 
} 
 

 
.navbar-nav > li:hover 
 
{ 
 
    border-top: 1px solid blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
<nav class="navbar navbar-default navbar-fixed-top"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header" > 
 
    <a class="navbar-brand" href="#">WebSiteName</a> 
 
    </div> 
 
    <ul class="nav navbar-nav navbar-right"> 
 
    <li><a href="#">Home</a></li> 
 
    <li><a href="#">Page 1</a></li> 
 
    <li><a href="#">Page 2</a></li> 
 
    <li><a href="#">Page 3</a></li> 
 
    <li><a href="#">Page 4</a></li> 
 
    <li><a href="#">Page 5</a></li> 
 
    </ul> 
 
    </div> 
 
</nav>

來源

2017-09-16 Steno

要覆蓋在引導一些類u必須使用@media規則。此外，我改變了懸停行爲，只是改變顏色不是所有的邊界。它會避免閃爍。

@media (min-width: 768px){ 
 
    ul.navbar-nav{ 
 
     table-layout: fixed; 
 
     display: table; 
 
     margin: 0 auto; 
 
     float: none; 
 
    } 
 
} 
 

 
.navbar 
 
{ 
 
    background-color: transparent; \t 
 
    padding-top: 30px; 
 
} 
 

 

 
.navbar a 
 
{ 
 
    font-size: 15px; 
 
    color: black; 
 
    text-transform: uppercase; 
 
    font-family: Ruda, sans-serif; 
 
} 
 

 
.navbar-brand 
 
{ 
 
    max-height: 40px; 
 
} 
 

 
.navbar-nav > li { 
 
    display: inline-block; 
 
    float:none; 
 
    padding-right:80px; 
 
    border-top: 1px solid transparent 
 
} 
 

 
.navbar-nav > li:hover 
 
{ 
 
    border-top-color: blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
<nav class="navbar navbar-default navbar-fixed-top"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header" > 
 
    <a class="navbar-brand" href="#">WebSiteName</a> 
 
    </div> 
 
    <ul class="nav navbar-nav"> 
 
    <li><a href="#">Home</a></li> 
 
    <li><a href="#">Page 1</a></li> 
 
    <li><a href="#">Page 2</a></li> 
 
    <li><a href="#">Page 3</a></li> 
 
    <li><a href="#">Page 4</a></li> 
 
    <li><a href="#">Page 5</a></li> 
 
    </ul> 
 
    </div> 
 
</nav>

來源

2017-09-16 13:44:56 Andreew4x4

感謝您對我的「邊境頂色」一角，但是這並沒有回答我的問題。「頁面x」和「家庭」之類的內容仍然不居中，懸停的上邊框仍然過大。 – Steno

不知道我深知你的問題，但你只是刪除了填充的「.navbar-NAV裏」藍線是小了且文本居中

.navbar 
 
{ 
 
    background-color: transparent; \t 
 
    padding-top: 30px; 
 
    /* border: 0; */ 
 
} 
 

 

 
.navbar a 
 
{ 
 
    font-size: 15px; 
 
    color: black; 
 
    text-align:center !important; 
 
    text-transform: uppercase; 
 
    font-family: Ruda, sans-serif; 
 
} 
 

 
.navbar-brand 
 
{ 
 
    max-height: 40px; 
 
} 
 

 
.navbar-nav > li { 
 
    display: inline-block; 
 
    float:none; 
 
} 
 

 
.navbar-nav > li:hover 
 
{ 
 
    border-top: 1px solid blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
<nav class="navbar navbar-default navbar-fixed-top"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header" > 
 
    <a class="navbar-brand" href="#">WebSiteName</a> 
 
    </div> 
 
    <ul class="nav navbar-nav navbar-right"> 
 
    <li><a href="#">Home</a></li> 
 
    <li><a href="#">Page 1</a></li> 
 
    <li><a href="#">Page 2</a></li> 
 
    <li><a href="#">Page 3</a></li> 
 
    <li><a href="#">Page 4</a></li> 
 
    <li><a href="#">Page 5</a></li> 
 
    </ul> 
 
    </div> 
 
</nav>

來源

2017-09-16 15:35:23

無法居中導航欄項目和懸停標記

回答

相關問題