Bootstrap4下拉菜单填充输入组 [英] Bootstrap4 Dropdown menu fill input-group

问题描述

我要解决一个非常简单的引导程序问题.

I have a very simple bootstrap issue that I'd like to solve.

根据指南( https://getbootstrap.com/docs/4.0/components/dropdowns/)，必须将.dropdown-menu类和dropdown-toggle包装在.dropdown或声明position: relative;的另一个元素中.

According to the guide (https://getbootstrap.com/docs/4.0/components/dropdowns/) the .dropdown-menu class and dropdown-toggle has to be wrapped within .dropdown, or another element that declares position: relative;.

但是到目前为止，只有将.dropdown-menu置于与切换相同的位置，我才能使它工作.因此，我只能在这样的右上角出现一个小的下拉列表.

But so far, I can only get it to work if I place the .dropdown-menu at the same level as my toggle. Because of this, I'm only able to get a small dropdown on the right hand corner like this.

但是，如果我将整个.dropdown-menu div块向下移动两个级别(在.input-group .dropdown div块内部)，那么我会达到这样的效果...

However, if I were to move the entire .dropdown-menu div block down by two levels (inside the .input-group .dropdown div block), I'd achieve an effect like this ...

...正是我想要的，但是，在控制台上，引导程序/弹出程序随后会弹出一个错误消息，告诉我Cannot read property 'setAttribute' of undefined，并且下拉菜单将不再缩回，这就是我所在的位置卡住了.

... which is exactly what I wanted, however, on the console, bootstrap/popper would then spew out an error telling me that Cannot read property 'setAttribute' of undefined, and the dropdown menu would not retract anymore, and that's where I'm stuck.

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

I have included a working code sample (first image) in the bottom for you to try, and please tell me if I'm using the dropdown class wrong?

非常感谢

<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>

编辑:我想出了一种解决问题的方法，但是随后我遇到了另一个问题，首先是代码.

I have figured out a way to resolve my issue, but then I encountered yet with another question, first of all, here's the code.

<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 div和.btn-group div，并将.dropdown-menu放在.dropdown的正下方，并且在菜单的同一级进行了切换.一切正常，... .input-group/.btn-group样式现在已经毁了.

What I've done is I've removed both .input-group-append div and .btn-group div, and have my .dropdown-menu right under .dropdown, as well as having the toggle at the same level with the menu. Everything works fine ... expect the .input-group / .btn-group styles are now ruined.

在没有手动使用CSS类覆盖它们的情况下，旧版本的类结构有什么问题导致其无法实现我想要的功能吗?

without manually using CSS class to override them, is there anything wrong with my class structure with the previous version that has caused it not to function what I wanted to achieve?

推荐答案

使包含的btn-group position:static像这样...

Make the containing btn-group position:static like this...

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>

工作方式:

引导程序4中的dropdown-menu是position:absolute，默认情况下，btn-group是position:relative. position:relative容器内的position:absolute元素将相对于容器调整大小.但是，将position:absolute元素放置在position:static容器内时，它将不再相对于容器调整大小.这允许dropdown-menu调整dropdown的全角大小. 请参见以下绝对内部相对与静态内部示例.

The dropdown-menu in Bootstrap 4 is position:absolute, and by default, the btn-group is position:relative. A position:absolute element inside a position:relative container will size relative to the container. However, when a position:absolute element is placed inside a position:static container, it will no longer resize relative to the container. This is allowing the dropdown-menu to size the full-width of the dropdown. See this example of absolute inside relative vs. static.

这篇关于Bootstrap4下拉菜单填充输入组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！