Bootstrap 4使用dropup固定底部导航。怎么样？
我在发布之前已经为此解决方案研究了该网站。似乎没有人使用这种方法。
我在 Pingendo.
中创建了以下模板
.dropup .dropdown-menu {
top: auto;
bottom: 100%;
margin-bottom: .125rem;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1" name="viewport">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="https://pingendo.com/assets/bootstrap/bootstrap-4.0.0-beta.1.css" rel="stylesheet" type="text/css">
<title></title>
</head>
<body>
<!-- !-->
<!-- !-->
<!-- !-->
<!-- !-->
<!-- START NAVBAR TOP - CUSTOM !-->
<nav class="navbar fixed-top bg-dark navbar-dark">
<div class="container"><a class="navbar-brand text-warning p-0 py-1" href="/"><i class="fa fa-home fa-lg"></i></a> <a class="navbar-text p-0 text-muted" href="0.html">HOME</a>
<nav class="nav"><a class="nav-link p-0 py-1 text-warning" href="#!"><i class="fa fa-ellipsis-v fa-lg"></i></a></nav>
</div>
</nav>
<!-- END NAVBAR TOP - CUSTOM !-->
<!-- START MAIN SECTION - CUSTOM !-->
<div class="py-5">
<div class="container py-3">
<div class="row">
<div class="col-sm-12">
<!-- START FORM - CUSTOM !-->
<form action="" class="text-center mb-2" method="post">
<div class="input-group">
<input class="form-control form-control-sm" placeholder="Client, address, phone..." type="text"> <span class="input-group-btn"><button class="btn btn-warning btn-sm border border-warning" type="button"><span class="input-group-btn"><span class="input-group-btn"><span class="input-group-btn"><span class="input-group-btn"> <i class="fa fa-search"></i> </span></span>
</span>
</span>
</button>
</span>
</div>
</form>
<!-- END FORM - CUSTOM !-->
<p class="p-0 m-0 mb-1 form-control-sm text-center">(n) search results</p>
<!-- START LIST-GROUP SEARCH RESULTS - CUSTOM !-->
<div class="list-group">
<!-- START LIST-GROUP-ITEM - CUSTOM !-->
<a class="list-group-item list-group-item-action form-control-sm flex-column align-items-start mb-1" href="#">
<div class="d-flex w-100 justify-content-between">
<p class="mb-0">TESLA, NIKOLA</p>
<small>3 days ago</small></div>
<small>123 Main Street, Salt Lake City, UT 84101</small>
<br>
<small><i class="fa fa-phone fa-lg"></i> 801-555-1234</small></a>
<!-- END LIST-GROUP-ITEM - CUSTOM !-->
<!-- START LIST-GROUP-ITEM - CUSTOM !-->
<a class="list-group-item list-group-item-action form-control-sm flex-column align-items-start mb-1" href="#">
<div class="d-flex w-100 justify-content-between">
<p class="mb-0">TESLA, NIKOLA</p>
<small>3 days ago</small></div>
<small>123 Main Street, Salt Lake City, UT 84101</small>
<br>
<small><i class="fa fa-phone fa-lg"></i> 801-555-1234</small></a>
<!-- END LIST-GROUP-ITEM - CUSTOM !-->
<!-- START LIST-GROUP-ITEM - CUSTOM !-->
<a class="list-group-item list-group-item-action form-control-sm flex-column align-items-start mb-1" href="#">
<div class="d-flex w-100 justify-content-between">
<p class="mb-0">TESLA, NIKOLA</p>
<small>3 days ago</small></div>
<small>123 Main Street, Salt Lake City, UT 84101</small>
<br>
<small><i class="fa fa-phone fa-lg"></i> 801-555-1234</small></a>
<!-- END LIST-GROUP-ITEM - CUSTOM !-->
</div>
<!-- END LIST-GROUP SEARCH RESULTS - CUSTOM !-->
</div>
</div>
</div>
</div>
<!-- END MAIN SECTION - CUSTOM !-->
<!-- START NAVBAR BOTTOM - CUSTOM !-->
<nav class="navbar fixed-bottom navbar-dark bg-dark">
<div class="container"><a class="nav-brand p-0 text-muted" href="#client"><i class="fa fa-address-book-o fa-lg mr-2"></i>Last, First</a>
<!-- Default dropup button -->
<div class="btn-group dropup">
<button class="btn btn-secondary" type="button">Dropup</button>
<button aria-expanded="false" aria-haspopup="true" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" type="button"><span class="sr-only">Toggle Dropdown</span></button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
</div>
</div>
<nav class="nav"><a class="nav-link p-1 pl-3 text-warning" href="#view_project"><i class="fa fa-folder-open fa-lg"></i></a> <a class="nav-link p-1 pl-3" href="#switch_project"><span class="badge badge-dark nav-item border border-warning text-warning">00:24</span></a> <a class="nav-link p-1 pl-1" href="#switch_project_task"><span class="badge border border-warning badge-warning"> PU </span></a></nav>
</div>
</nav>
<!-- END NAVBAR BOTTOM - CUSTOM !-->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js">
</script>
</body>
</html>
遵循以下基本布局结构：
navbar fixed-top
容器
navbar fixed-bottom
然后，我访问了关于 Dropup variation 下拉菜单的Bootstrap 4页面。
我将以下示例代码添加到我的NAVBAR BOTTOM中，如下所示：
<!-- Default dropup button -->
<div class="btn-group dropup">
<button type="button" class="btn btn-secondary">Dropup</button>
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
</div>
</div>
我遇到的问题是它不能像在网站上一样工作。
它继续弹出...... 也许有人可以指出我错过的东西？
感谢您的任何提示。
3 个答案:
答案 0 :(得分：1)
Bootstrap使用的
Popper.js支持导航栏内的下拉以对齐下拉列表。 https://getbootstrap.com/docs/4.0/components/dropdowns/#menu-alignment
所以作为替代方案，将此添加到您的CSS。它应该工作。
.dropup .dropdown-menu {
top: auto;
bottom: 100%;
margin-bottom: .125rem;
}
完整示例
＆＃13;
＆＃13;
＆＃13;
＆＃13;
.dropup .dropdown-menu {
top: auto;
bottom: 100%;
margin-bottom: .125rem;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1" name="viewport">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="https://pingendo.com/assets/bootstrap/bootstrap-4.0.0-beta.1.css" rel="stylesheet" type="text/css">
<title></title>
</head>
<body>
<!-- !-->
<!-- !-->
<!-- !-->
<!-- !-->
<!-- START NAVBAR TOP - CUSTOM !-->
<nav class="navbar fixed-top bg-dark navbar-dark">
<div class="container"><a class="navbar-brand text-warning p-0 py-1" href="/"><i class="fa fa-home fa-lg"></i></a> <a class="navbar-text p-0 text-muted" href="0.html">HOME</a>
<nav class="nav"><a class="nav-link p-0 py-1 text-warning" href="#!"><i class="fa fa-ellipsis-v fa-lg"></i></a></nav>
</div>
</nav>
<!-- END NAVBAR TOP - CUSTOM !-->
<!-- START MAIN SECTION - CUSTOM !-->
<div class="py-5">
<div class="container py-3">
<div class="row">
<div class="col-sm-12">
<!-- START FORM - CUSTOM !-->
<form action="" class="text-center mb-2" method="post">
<div class="input-group">
<input class="form-control form-control-sm" placeholder="Client, address, phone..." type="text"> <span class="input-group-btn"><button class="btn btn-warning btn-sm border border-warning" type="button"><span class="input-group-btn"><span class="input-group-btn"><span class="input-group-btn"><span class="input-group-btn"> <i class="fa fa-search"></i> </span></span>
</span>
</span>
</button>
</span>
</div>
</form>
<!-- END FORM - CUSTOM !-->
<p class="p-0 m-0 mb-1 form-control-sm text-center">(n) search results</p>
<!-- START LIST-GROUP SEARCH RESULTS - CUSTOM !-->
<div class="list-group">
<!-- START LIST-GROUP-ITEM - CUSTOM !-->
<a class="list-group-item list-group-item-action form-control-sm flex-column align-items-start mb-1" href="#">
<div class="d-flex w-100 justify-content-between">
<p class="mb-0">TESLA, NIKOLA</p>
<small>3 days ago</small></div>
<small>123 Main Street, Salt Lake City, UT 84101</small>
<br>
<small><i class="fa fa-phone fa-lg"></i> 801-555-1234</small></a>
<!-- END LIST-GROUP-ITEM - CUSTOM !-->
<!-- START LIST-GROUP-ITEM - CUSTOM !-->
<a class="list-group-item list-group-item-action form-control-sm flex-column align-items-start mb-1" href="#">
<div class="d-flex w-100 justify-content-between">
<p class="mb-0">TESLA, NIKOLA</p>
<small>3 days ago</small></div>
<small>123 Main Street, Salt Lake City, UT 84101</small>
<br>
<small><i class="fa fa-phone fa-lg"></i> 801-555-1234</small></a>
<!-- END LIST-GROUP-ITEM - CUSTOM !-->
<!-- START LIST-GROUP-ITEM - CUSTOM !-->
<a class="list-group-item list-group-item-action form-control-sm flex-column align-items-start mb-1" href="#">
<div class="d-flex w-100 justify-content-between">
<p class="mb-0">TESLA, NIKOLA</p>
<small>3 days ago</small></div>
<small>123 Main Street, Salt Lake City, UT 84101</small>
<br>
<small><i class="fa fa-phone fa-lg"></i> 801-555-1234</small></a>
<!-- END LIST-GROUP-ITEM - CUSTOM !-->
</div>
<!-- END LIST-GROUP SEARCH RESULTS - CUSTOM !-->
</div>
</div>
</div>
</div>
<!-- END MAIN SECTION - CUSTOM !-->
<!-- START NAVBAR BOTTOM - CUSTOM !-->
<nav class="navbar fixed-bottom navbar-dark bg-dark">
<div class="container"><a class="nav-brand p-0 text-muted" href="#client"><i class="fa fa-address-book-o fa-lg mr-2"></i>Last, First</a>
<!-- Default dropup button -->
<div class="btn-group dropup">
<button class="btn btn-secondary" type="button">Dropup</button>
<button aria-expanded="false" aria-haspopup="true" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" type="button"><span class="sr-only">Toggle Dropdown</span></button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
</div>
</div>
<nav class="nav"><a class="nav-link p-1 pl-3 text-warning" href="#view_project"><i class="fa fa-folder-open fa-lg"></i></a> <a class="nav-link p-1 pl-3" href="#switch_project"><span class="badge badge-dark nav-item border border-warning text-warning">00:24</span></a> <a class="nav-link p-1 pl-1" href="#switch_project_task"><span class="badge border border-warning badge-warning"> PU </span></a></nav>
</div>
</nav>
<!-- END NAVBAR BOTTOM - CUSTOM !-->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js">
</script>
</body>
</html>
答案 1 :(得分：0)
将班级 dropup 添加到 class =“btn-group btn-group-lg”或您的按钮包装。
答案 2 :(得分：0)
未来参考的工作版本
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="https://pingendo.com/assets/bootstrap/bootstrap-4.0.0-beta.1.css" type="text/css">
<style media="screen" type="text/css">
.dropup .dropdown-menu {
top: auto;
bottom: 100%;
left: -100%;
margin-bottom: .125rem;
}
</style>
</head>
<body>
<!-- !-->
<!-- !-->
<!-- !-->
<!-- !-->
<!-- START NAVBAR TOP - CUSTOM !-->
<nav class="navbar fixed-top navbar-dark bg-dark">
<div class="container p-0">
<!-- START NAVBAR TOP - NAV LEFT - CUSTOM !-->
<nav class="nav">
<a class="nav-link text-warning px-0 pr-4" href="/main"> <i class="fa fa-search fa-2x"></i> </a>
</nav>
<!-- END NAVBAR TOP - NAV LEFT - CUSTOM !-->
<!-- START NAVBAR TOP - NAV CENTER - CUSTOM !-->
<nav class="nav">
<a class="nav-link px-0 text-muted" href="#blank"> Last, First</a>
</nav>
<!-- END NAVBAR TOP - NAV CENTER - CUSTOM !-->
<!-- START NAVBAR TOP - NAV RIGHT - CUSTOM !-->
<nav class="nav">
<a class="nav-link text-warning px-0 pl-4" href="#blank"> <i class="fa fa-plus fa-2x text-warning"></i> </a>
</nav>
<!-- END NAVBAR TOP - NAV RIGHT - CUSTOM !-->
</div>
</nav>
<!-- END NAVBAR TOP - CUSTOM !-->
<!-- START MAIN SECTION - CUSTOM !-->
<div class="py-5">
<div class="container py-5">
<div class="row">
<div class="col-sm-12">
<!-- START FORM - CUSTOM !-->
<form action="" class="text-center mb-2" method="post">
<div class="input-group">
<input class="form-control" placeholder="Client, address, phone..." type="text"> <span class="input-group-btn">
<button class="btn btn-warning border border-warning" type="button"> <i class="fa fa-search"></i> </button>
</span> </div>
</form>
<!-- END FORM - CUSTOM !-->
<p class="p-0 m-0 mb-1 form-control-sm text-center">(n) search results</p>
<!-- START LIST-GROUP SEARCH RESULTS - CUSTOM !-->
<div class="list-group">
<!-- START LIST-GROUP-ITEM - CUSTOM !-->
<a class="list-group-item list-group-item-action form-control-sm flex-column align-items-start mb-1" href="#">
<div class="d-flex w-100 justify-content-between">
<p class="mb-0">TESLA, NIKOLA</p> <small>3 days ago</small> </div> <small>123 Main Street, Salt Lake City, UT 84101</small>
<br> <small>
<i class="fa fa-phone fa-lg"></i>
801-555-1234
</small> </a>
<!-- END LIST-GROUP-ITEM - CUSTOM !-->
<!-- START LIST-GROUP-ITEM - CUSTOM !-->
<a class="list-group-item list-group-item-action form-control-sm flex-column align-items-start mb-1" href="#">
<div class="d-flex w-100 justify-content-between">
<p class="mb-0">TESLA, NIKOLA</p> <small>3 days ago</small> </div> <small>123 Main Street, Salt Lake City, UT 84101</small>
<br> <small>
<i class="fa fa-phone fa-lg"></i>
801-555-1234
</small> </a>
<!-- END LIST-GROUP-ITEM - CUSTOM !-->
<!-- START LIST-GROUP-ITEM - CUSTOM !-->
<a class="list-group-item list-group-item-action form-control-sm flex-column align-items-start mb-1" href="#">
<div class="d-flex w-100 justify-content-between">
<p class="mb-0">TESLA, NIKOLA</p> <small>3 days ago</small> </div> <small>123 Main Street, Salt Lake City, UT 84101</small>
<br> <small>
<i class="fa fa-phone fa-lg"></i>
801-555-1234
</small> </a>
<!-- END LIST-GROUP-ITEM - CUSTOM !-->
</div>
<!-- END LIST-GROUP SEARCH RESULTS - CUSTOM !-->
</div>
</div>
</div>
</div>
<!-- END MAIN SECTION - CUSTOM !-->
<!-- START NAVBAR BOTTOM - CUSTOM !-->
<nav class="navbar fixed-bottom navbar-dark bg-dark">
<div class="container p-0">
<!-- START NAVBAR BOTTOM - NAV LEFT - CUSTOM !-->
<nav class="nav">
<a class="nav-link text-warning px-0 pr-4" href="#blank"> <i class="fa fa-folder-open-o fa-lg"></i> </a>
<a class="nav-link text-warning px-0 pr-4" href="#blank"> <i class="fa fa-asterisk fa-lg"></i> </a>
<a class="nav-link text-warning px-0 pr-4" href="#blank"> <i class="fa fa-superscript fa-lg"></i> </a>
<a class="nav-link text-warning px-0 pr-4" href="#blank"> <i class="fa fa-thermometer-half fa-lg"></i> </a>
<a class="nav-link text-warning px-0 pr-4" href="#blank"> <i class="fa fa-wrench fa-lg"></i> </a>
</nav>
<!-- END NAVBAR BOTTOM - NAV LEFT - CUSTOM !-->
<!-- Default dropup button -->
<div class="btn-group dropup btn-group-sm">
<button type="button" class="btn dropdown-toggle btn-warning" aria-expanded="false" aria-haspopup="true" data-toggle="dropdown">CLOCK IN <span class="sr-only"> </span> </button>
<div class="dropdown-menu text-right">
<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 class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
</div>
</nav>
<!-- END NAVBAR BOTTOM - CUSTOM !-->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？