将下拉项显示为导航项而不是弹出列表

时间：2017-02-01 17:44:32

标签： html css twitter-bootstrap

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

我有一个侧栏nav位于左侧，所有项目都放在另一侧下方，我有一个下拉但问题是当我点击它时会出现一个弹出窗口，我希望的是下拉单击下面的项目应该向下移动并显示列表显示。

我想要这样的东西

enter image description here

请指导我实现这一目标。

1 个答案:

答案 0 :(得分：1)

很容易转换。主要是摆脱absolute定位和一些造型繁荣，如圆角。

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题