一个容器内的一个boostrap div

Question

我想在bootsrap的主容器中放置一个导航，但是当我把它放在主容器内时，我甚至不能点击导航，就好像它是另一个元素一样。

<div class="container" id="faqe1"> 


    <div class="dotstyle dotstyle-tooltip"> 

       <ul> 
        <li class="current"><a href="#">Home</a></li> 
        <li><a href="#">About</a></li> 
        <li><a href="#">Products</a></li> 
        <li><a href="#">Portfolio</a></li> 
        <li><a href="#">Blog</a></li> 
        <li><a href="#">Contact</a></li> 
       </ul> 
      </div> 




    </div> <!-- Kontaineri --> 

我试图

z-index 

，但没有喜悦！

任何帮助？

EDITED

继承人导航的CSS

.dotstyle ul { 
    position: relative; 
    display: inline-block; 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    cursor: default; 
    -webkit-touch-callout: none; 
    -webkit-user-select: none; 
    -khtml-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 

    top:25em; 
    left: -8em; 

    transform: rotate(90deg) 


} 

.dotstyle li { 
    position: relative; 
    display: block; 
    float: left; 
    margin: 0 16px; 
    width: 16px; 
    height: 16px; 
    cursor: pointer; 




} 

.dotstyle li a { 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    outline: none; 
    border-radius: 50%; 
    background-color: #fff; 
    background-color: rgba(255, 255, 255, 0.3); 
    text-indent: -999em; /* make the text accessible to screen readers */ 
    cursor: pointer; 
    position: absolute; 





} 

.dotstyle li a:focus { 
    outline: none; 
} 

/* Individual styles and effects */ 



/* Tooltip */ 

.dotstyle-tooltip li { 
    border: 1px solid #fff; 
    border-radius: 50%; 
    z-index: 1; 
    -webkit-transition: border-color 0.3s ease; 
    transition: border-color 0.3s ease; 






} 

.dotstyle-tooltip li a { 
    top: auto; 
    bottom: 250%; 
    left: 50%; 
    visibility: hidden; 
    padding: 0 10px; 
    width: auto; 
    height: auto; 
    border-radius: 5px; 
    background-color: #c44d48; 
    color: #fff; 
    text-indent: 0; 
    line-height: 2; 
    opacity: 0; 
    -webkit-transform: translateX(-50%) translateY(-50%); 
    transform: translateX(-50%) translateY(-50%); 
    -webkit-transition: -webkit-transform 0.3s ease, opacity 0.3s ease, visibility 0s 0.3s ease; 
    transition: transform 0.3s ease, opacity 0.3s ease, visibility 0s 0.3s ease; 




} 

.dotstyle-tooltip li a::after { /* http: //cssarrowplease.com/ */ 
    position: absolute; 
    left: 50%; 
    margin-left: -10px; 
    width: 0; 
    height: 0; 
    border: solid transparent; 
    border-width: 10px; 
    border-color: transparent; 
    border-top-color: #c44d48; 
    content: ''; 
    pointer-events: none; 
    top: 99%; 
    -webkit-backface-visibility: hidden; 
    backface-visibility: hidden; 
    -webkit-transition: opacity 0.3s ease; 
    transition: opacity 0.3s ease; 


} 

.no-touch .dotstyle-tooltip li:hover a, 
.dotstyle-tooltip li.current a { 
    z-index: 100; 
    visibility: visible; 
    opacity: 1; 
    -webkit-transform: translateX(-50%) translateY(0%); 
    transform: translateX(-50%) translateY(0%); 
    -webkit-transition: -webkit-transform 0.3s ease, opacity 0.3s ease; 
    transition: transform 0.3s ease, opacity 0.3s ease; 




} 

.dotstyle-tooltip li.current { 
    border-color: #c44d48; 
} 

.dotstyle-tooltip li:hover { 
    z-index: 100; 
} 

.no-touch .dotstyle-tooltip ul:hover li.current a { 
    opacity: 0.2; 
} 

.dotstyle-tooltip ul li.current:hover a { 
    opacity: 1; 
} 

，我也有这样的容器背景渐变叠加：

html, 
body { 
    height: 100%; 
} 


#faqe1 { 

    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    background-image:url("../images/Unknown-2.jpg"); 
    background-attachment: fixed; 
    background-repeat: no-repeat; 
    position: relative; 
    z-index: -2; 


} 


#faqe1:before { 
    content: " "; 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    z-index: -9999; 
    top: 0; 
    left: 0; 
    background: -webkit-linear-gradient(rgba(255,155,245,.8) 0%,rgba(0,155,0,.6) 100%); 
} 

Answer 1

在＃faqe1的Z-index是导致问题的原因之一，当你摆脱它时，你应该能够访问链接。见下面这个链接：

faqe1 {

width: 100%; 
height: 100%; 
margin: 0; 
padding: 0; 
background-image:url("../images/Unknown-2.jpg"); 
background-attachment: fixed; 
background-repeat: no-repeat; 
position: relative; 

}

Codepen Link