我希望列表下拉至按钮下方,但下拉菜单并非一直位于当前显示的第一个div上。
的HTML
<div class="categories row" id = "secondDiv">
<div class = "col-md-4 header text-center">
<p id = "columnOne"> Find Your Favorite Celebrity </p>
<div class="dropdown-container">
<button class="btn btn-secondary dropdown-toggle btn-outline-danger btn-lg dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> JUST
<span class="caret"></span></button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Justin Bieber <input type="radio" id="ID" name="NAME" value="VALUE"><label for="ID"></label> </a>
<a class="dropdown-item" href="#">Taylor Swift <input type="radio" id="ID" name="NAME" value="VALUE"><label for="ID"></label> </a>
<a class="dropdown-item" href="#">Jay Z <input type="radio" id="ID" name="NAME" value="VALUE"><label for="ID"></label> </a>
<a class="dropdown-item" href="#">Beyonce <input type="radio" id="ID" name="NAME" value="VALUE"><label for="ID"></label> </a>
<a class="dropdown-item" href="#">Rihanna <input type="radio" id="ID" name="NAME" value="VALUE"><label for="ID"></label> </a>
<a class="dropdown-item" href="#">Ariana Grande <input type="radio" id="ID" name="NAME" value="VALUE"><label for="ID"></label> </a>
<a class="dropdown-item" href="#">Cherie Lum <input type="radio" id="ID" name="NAME" value="VALUE"><label for="ID"></label> </a>
</div>
</div>
</div>
的CSS
.dropdown-container {
职位:相对}
.dropdown-menu {位置:绝对;最高:100%; /* 底部
按钮/左边距:-100px; /更左侧* /}
最佳答案
这是你想要的。
使用的CSS是
.dropdown-container {
position: relative;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0px;
}
.dropdown-menu a {
display: block;
}
.dropdown-container {
position: relative;
display: inline-block;
}
关于javascript - Bootstrap Button Drop Down在div上方弹出,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/46748024/