引導下拉不起作用即使按上下鍵都正常工作

我試圖創建一個簡單的下拉式引導下拉的幫助。引導下拉不起作用即使按上下鍵都正常工作

我包括所有文件，它在一些地方工作正常，但在幾頁中，當我點擊3個點，應該打開下拉沒有任何顯示。當我按下向下鍵時，彈出選項。

我以爲是什麼東西，其中的東西與Z指數混亂。所以我試着把Z-index:100;，但它沒有達到我的目的。所以必須把東西放在這裏。

在此先感謝誰會提出一個幫助的想法。我的代碼是這樣的。

<span class="pull-right dropdown" > 
    <a href="#" lass="dropdown-toggle" data-toggle="dropdown"> 
     <i class="fa fa-circle" style="font-size:7px;"></i> 
     <i class="fa fa-circle" style="font-size:7px;"></i> 
     <i class="fa fa-circle" style="font-size:7px;"></i> 
    </a> 
    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel" style="width:160px; right:14px;"> 
     <li><a style="width:155px;" href="edit_blog.php?b=<?php echo base64_encode($blog_id); ?>" target="_blank">Edit Blog</a></li> 
     <li><a style="width:155px;" href="javascript:void(0);" class="delete_blog" id="delete_blog-<?php echo $blog_id;?>">Delete Blog</a></li> 
    </ul>        
</span>

萬一出時不包括正確的文件搞亂了，這些都是我包含的文件：

<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/3.2.1/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

https://jsfiddle.net/hantr01n/

來源

2017-06-17 Archelese

哪裏是你的CSS –

bootstrap.min.css已經包含 – Archelese

當我做出了摘錄顯示沒有 –

.container { 
 
    overflow: hidden; 
 
    background-color: #333; 
 
    font-family: Arial; 
 
} 
 

 
.container a { 
 
    float: left; 
 
    font-size: 16px; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 

 
.dropdown { 
 
    float: left; 
 
    overflow: hidden; 
 
} 
 

 
.dropdown .dropbtn { 
 
    font-size: 16px;  
 
    border: none; 
 
    outline: none; 
 
    color: white; 
 
    padding: 14px 16px; 
 
    background-color: inherit; 
 
} 
 

 
.container a:hover, .dropdown:hover .dropbtn { 
 
    background-color: red; 
 
} 
 

 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #f9f9f9; 
 
    min-width: 160px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
 
    z-index: 1; 
 
} 
 

 
.dropdown-content a { 
 
    float: none; 
 
    color: black; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
    text-align: left; 
 
} 
 

 
.dropdown-content a:hover { 
 
    background-color: #ddd; 
 
} 
 

 
.dropdown:hover .dropdown-content { 
 
    display: block; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
</head> 
 
<body> 
 

 
<div class="container"> 
 
    <a href="#home">Home</a> 
 
    <a href="#news">News</a> 
 
    <div class="dropdown"> 
 
    <button class="dropbtn">Dropdown</button> 
 
    <div class="dropdown-content"> 
 
     <a href="#">Link 1</a> 
 
     <a href="#">Link 2</a> 
 
     <a href="#">Link 3</a> 
 
    </div> 
 
    </div> 
 
    <a href="#news">Link</a> 
 
</div> 
 

 
<h3>Dropdown Menu inside a Navigation Bar</h3> 
 
<p>Hover over the "Dropdown" link to see the dropdown menu.</p> 
 

 
</body> 
 
</html>

你需要試試這個

來源

2017-06-18 08:38:10

感謝很多人爲我工作 – Archelese

沒關係。並請檢查左側的標記，並給我一個投票 –

已經做到了，但我的聲望在25以下，所以我自己的投票不算數，即使它是我的問題。 – Archelese

引導下拉不起作用即使按上下鍵都正常工作

回答

相關問題