代码之家 › 专栏 › 技术社区 › Willy_Sunny

Bootstrap4下拉菜单填充输入组

popper.js dropdown bootstrap-4 drop-down-menu css

2

Willy_Sunny · 技术社区 · 6 年前

我想解决一个非常简单的引导问题。

根据指南( https://getbootstrap.com/docs/4.0/components/dropdowns/ )the .dropdown-menu 类和下拉切换必须包装在 .dropdown ,或另一个声明 position: relative; 。

但到目前为止,我只有在 .下拉菜单 与我的切换处于同一级别。正因为如此,我只能在右角像这样得到一个小下拉列表。

然而,如果我要移动整个 .下拉菜单 分区块向下两层(在 .input-group .dropdown div block),我会达到这样的效果。。。

。。。这正是我想要的,然而,在控制台上,引导程序/弹出程序会弹出一个错误,告诉我 Cannot read property 'setAttribute' of undefined ,而下拉菜单将不再收缩,这就是我被卡住的地方。

我在底部包含了一个工作代码示例(第一幅图片),供您尝试,请告诉我是否使用了错误的下拉类?

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<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.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="container">
  <div class="row">
    <div class="col-12">
      <div class="input-group dropdown">
        <input type="text" class="form-control" id="project_search" placeholder="search ...">
        <div class="input-group-append">
          <div class="btn-group">
            <button class="btn bg-primary text-white" type="button">Search</button>
            <button class="btn bg-primary text-white dropdown-toggle dropdown-toggle-split" id="searchAdvancedFilter" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <span class="caret"></span>
              <span class="sr-only">Toggle Dropdown</span>
            </button>
            <div class="dropdown-menu dropdown-menu-right w-100" aria-labelledby="searchAdvancedFilter">
              <h6 class="dropdown-header">Advanced Settings</h6>
              <div class="dropdown-divider"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

我已经找到了解决问题的方法,但后来我遇到了另一个问题,首先,这是代码。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<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.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="container">
  <div class="row">
    <div class="col-12">
      <div class="input-group dropdown">
        <input type="text" class="form-control" id="project_search" placeholder="search ...">
        <button class="btn bg-primary text-white" type="button">Search</button>
        <button class="btn bg-primary text-white dropdown-toggle dropdown-toggle-split" id="searchAdvancedFilter" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <span class="caret"></span>
          <span class="sr-only">Toggle Dropdown</span>
        </button>
        <div class="dropdown-menu dropdown-menu-right w-100" aria-labelledby="searchAdvancedFilter">
          <h6 class="dropdown-header">Advanced Settings</h6>
          <div class="dropdown-divider"></div>
        </div>
      </div>
    </div>
  </div>
</div>

我所做的是把两者都去掉了 .input-group-append 部门和 .btn-group div,还有我的 .下拉菜单 正下方 .下拉列表 ,以及与菜单处于同一级别的切换。一切正常。。。预计 .input-group / .btn组 风格现在被破坏了。

如果不手动使用CSS类来覆盖它们,我的类结构与以前的版本是否有任何错误,导致它无法实现我想要实现的功能?

1 回复 | 直到 3 年前

1

2

Carol Skelly 6 年前

制作包含 btn-group position:static 像这样。。。

https://www.codeply.com/go/6kJ3E53PuF

<div class="container">
  <div class="row">
    <div class="col-12">
      <div class="input-group dropdown">
        <input type="text" class="form-control" id="project_search" placeholder="search ...">
        <div class="input-group-append">
          <div class="btn-group position-static">
            <button class="btn bg-primary text-white" type="button">Search</button>
            <button class="btn bg-primary text-white dropdown-toggle dropdown-toggle-split" id="searchAdvancedFilter" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <span class="caret"></span>
              <span class="sr-only">Toggle Dropdown</span>
            </button>
            <div class="dropdown-menu dropdown-menu-right w-100" aria-labelledby="searchAdvancedFilter">
              <h6 class="dropdown-header">Advanced Settings</h6>
              <div class="dropdown-divider"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

工作原理:

这个 dropdown-menu 在Bootstrap 4中是 position:absolute ,默认情况下 btn组 是 position:relative A. 位置:绝对 a中的元素 位置:相对 容器大小将相对于容器。但是,当 位置:绝对 元素放置在 位置:静态 容器 它将不再相对于容器调整大小 。这允许 下拉菜单 调整 dropdown 。 See this example of absolute inside relative vs. static 。