Sự cố khi di chuột qua nút

Question

Tôi đang sử dụng Twitter Bootstrap và tôi đang gặp phải một số điều lạ khi sử dụng khi di chuột qua nút btn-primary.

Đây là mã của tôi:

<div class="navbar navbar-fixed-top"> 
    <div class="navbar-inner"> 
    <div class="container"> 
     <ul class="nav nav-pills"> 
     <li class="active"> 
     <a href="#">Home</a> 
     </li> 
     <li><a href="#">...</a></li> 
     <li><a href="#">...</a></li> 
     <li><a href="#" class="btn btn-primary btn-small"> 
        <i class="icon-user icon-white"></i> Log In 
        </a> 
       </li> 
    </ul> 
    </div> 
    </div> 
</div> 

Và đây là những gì sẽ xảy ra:

trước

trên di chuột

---

Mọi ý tưởng tại sao điều này có thể xảy ra?

Answer 1

2 giải pháp,

• dễ dàng: Tháo a href từ li. Pro: nhanh, không bảo trì. Con: không thể làm điều này nếu bạn cần một trình đơn thả xuống, có thể phá vỡ thiết kế.
• Ưu tiên: thêm các lớp css bị thiếu để hỗ trợ btn trong li.

.navbar .nav > li > a.btn { 
display: inline-block; padding: 4px 10px 4px; margin: 5px 5px 6px; line-height: 18px; 
} 

.navbar .nav > li > a.btn-primary, 
.navbar .nav > li > a.btn-primary:hover { 
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); 
    color: #ffffff; 
} 


.navbar .nav > li > a.btn-primary:active { 
    color: rgba(255, 255, 255, 0.75); 
} 

.navbar .nav > li > a..btn-primary { 
    background-color: #0074cc; 
    background-image: -moz-linear-gradient(top, #0088cc, #0055cc); 
    background-image: -ms-linear-gradient(top, #0088cc, #0055cc); 
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0055cc)); 
    background-image: -webkit-linear-gradient(top, #0088cc, #0055cc); 
    background-image: -o-linear-gradient(top, #0088cc, #0055cc); 
    background-image: linear-gradient(top, #0088cc, #0055cc); 
    background-repeat: repeat-x; 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc',endColorstr='#0055cc', GradientType=0); 
    border-color: #0055cC#0055cC#003580; 
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); 
    filter: progid:dximagetransform.microsoft.gradient(enabled=false); 
} 
.navbar .nav > li > a.btn-primary:hover, 
.navbar .nav > li > a.btn-primary:active, 
.navbar .nav > li > a.btn-primary.disabled, 
.navbar .nav > li > a.btn-primary[disabled] { 
    background-color: #0055cc; 
} 
.navbar .nav > li > a.btn-primary:active, 
.navbar .nav > li > a.btn-primary.active { 
    background-color: #004099 \9; 
}