个人中心
gpt4 book ai didi

html - Bootstrap 4 Fixed Bottom Nav with dropup。如何？

转载 作者：太空宇宙 更新时间：2023-11-04 07:59:15 26 4
gpt4 key购买 nike

在发布之前，我已经研究了该解决方案的站点。似乎没有一种方法适用于这种方法。

我在中创建了以下模板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">&nbsp;<i class="fa fa-search"></i>&nbsp;</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> &nbsp;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> &nbsp;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> &nbsp;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">&nbsp;PU&nbsp;</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>

它遵循以下基本布局结构:

导航栏固定顶部

容器

导航栏固定底部

然后我访问了关于一个 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>

我遇到的问题是它不像在他们的网站上那样工作。

它继续弹出..也许有人可以指出我遗漏了什么？

感谢您的任何提示。

最佳答案

Dropdown inside a navbar is supported by Popper.js used by Bootstrap to align the dropdown. https://getbootstrap.com/docs/4.0/components/dropdowns/#menu-alignment

https://getbootstrap.com/docs/4.0/components/dropdowns/#menu-alignment

因此，作为替代方案，将其添加到您的 CSS 中。它应该有效。

.dropup .dropdown-menu {
  top: auto;
  bottom: 100%;
  margin-bottom: .125rem;
}

完整示例

.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">&nbsp;<i class="fa fa-search"></i>&nbsp;</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> &nbsp;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> &nbsp;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> &nbsp;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">&nbsp;PU&nbsp;</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>

关于html - Bootstrap 4 Fixed Bottom Nav with dropup。如何？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47114994/

26 4 0
文章推荐： c - Unsigned int 未给出预期值
文章推荐： python - 从字符串列表中删除某些字符串作为 pandas.DataFrame 中的列
文章推荐： html - 只缩放 div，而不缩放里面的内容
文章推荐： css - PostCSS 导入不在@media 查询中导入文件
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com