如何使下拉菜单向上扩展而不是向下扩展?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<br>
<div class="container">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
COLOR
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">red</a>
<a class="dropdown-item" href="#">yellow</a>
</div>
</div>
</body>
</html>
我希望下拉菜单向上而不是向下展开,但实际输出是,下拉菜单向下显示。
答案 0 :(得分:1)
这是一个引导解决方案
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<br>
<br>
<br>
<br>
<div class="container">
<div class="btn-group dropup">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
COLOR
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">red</a>
<a class="dropdown-item" href="#">yellow</a>
</div>
</div>
</div>
</body>
</html>
答案 1 :(得分:0)
如果该按钮是您页面上唯一的按钮,并且我怀疑从您的代码中删除该下拉列表将无法工作...因此请检查下面的代码,然后尝试删除H1和p标签...
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container">
<h1> This is demo text </h1>
<p>There needs to be some text... else it won't open up</p>
<div class="dropup">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
COLOR
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">red</a>
<a class="dropdown-item" href="#">yellow</a>
</div>
</div>
</div>