顯示下拉的項目，如導航項，而不是彈出列表

.dashBoard { 
 
    width: 250; 
 
    height: 100vh; 
 
    background-color: mediumaquamarine; 
 
    
 
} 
 

 
.navbar-nav > li > .nav-link { 
 
    font-size: 18px; 
 
    color: black; 
 
    padding-top: 0px !important; 
 
    padding-bottom: 2px; 
 
    padding-left: 10px; 
 
}

<html> 
 

 
<head> 
 
    <title></title> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 
 
    <link rel="stylesheet" href="css/coreStyleSheet.css"> 
 
    <link rel="stylesheet" href="css/animate.css"> 
 
</head> 
 

 
<body> 
 

 
    <div class="container-fluid"> 
 
    <div class="row"> 
 
     <div class="col-10 col-md-3 col-lg-3 col-sm-6"> 
 
     <div class="dashBoard animated slideInLeft" id="navbarToggleExternalContent"> 
 
      <ul class="navbar-nav"> 
 
      <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
 
       Module 1 
 
      </a> 
 
       <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> 
 
       </div> 
 
      </li> 
 
      <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
 
       Module 2 
 
      </a> 
 
       <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> 
 
       </div> 
 
      </li> 
 
      <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
 
       Module 3 
 
      </a> 
 
       <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> 
 
       </div> 
 
      </li> 
 
      </ul> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

我有一個側欄nav這是在左邊，所有的項目都放在下面的其他，我有一個下拉，但問題是當我點擊它作爲一個彈出式窗口，我希望是下拉的點擊下面的項目應該下移和列表顯示出現。

我想是這樣的

請指引我實現這一目標。

來源

2017-02-01 Rehan

我轉換你的代碼片斷，你可以把它一點點接近你所描述的爲你的現狀如何？ –

我使用引導程序4並從這裏運行代碼段不是我當前的狀態。讓我爲你擺好小提琴。稍等片刻。 – Rehan

您可以在SO上包含外部資源到片段，它幾乎和小提琴一樣好。 –

非常容易轉換。主要是擺脫absolute定位和一些造型如圓角的繁榮。

.dashBoard { 
 
    width: 250; 
 
    height: 100vh; 
 
    background-color: mediumaquamarine; 
 
    
 
} 
 

 
.navbar-nav > li > .nav-link { 
 
    font-size: 18px; 
 
    color: black; 
 
    padding-top: 0px !important; 
 
    padding-bottom: 2px; 
 
    padding-left: 10px; 
 
} 
 

 
div.dropdown-menu{ 
 
    position: static; 
 
    width: 100%; 
 
    border-radius:0; 
 
    border: none; 
 
}

<html> 
 

 
<head> 
 
    <title></title> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 
 
    <link rel="stylesheet" href="css/coreStyleSheet.css"> 
 
    <link rel="stylesheet" href="css/animate.css"> 
 
</head> 
 

 
<body> 
 

 
    <div class="container-fluid"> 
 
    <div class="row"> 
 
     <div class="col-10 col-md-3 col-lg-3 col-sm-6"> 
 
     <div class="dashBoard animated slideInLeft" id="navbarToggleExternalContent"> 
 
      <ul class="navbar-nav"> 
 
      <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
 
       Module 1 
 
      </a> 
 
       <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> 
 
       </div> 
 
      </li> 
 
      <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
 
       Module 2 
 
      </a> 
 
       <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> 
 
       </div> 
 
      </li> 
 
      <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
 
       Module 3 
 
      </a> 
 
       <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> 
 
       </div> 
 
      </li> 
 
      </ul> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

來源

2017-02-01 18:11:25

'顯示：靜態'是問題？ – Rehan

大部分，是的。相反，顯示：絕對將元素從自然流程中分離出來，因此它對周圍的元素沒有影響。靜態將其放回到流程中。 –

耶謝謝。我不知道這一點。感謝芽:) – Rehan

顯示下拉的項目，如導航項，而不是彈出列表

回答

相關問題