Question

我添加了2个具有下拉功能的按钮（引导程序4）。

第一个按钮正确显示其内容。第二个按钮显示第一个按钮的内容！

我创建了一个jsfiddle来重现该问题： https://jsfiddle.net/marcvidalmoreno/8061s2ca/

<button type="button" class="btn btn-default btn-sm mr-1 dropdown-toggle"
        id="button1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Button 1
</button>

<div aria-labelledby="button1" class="dropdown-menu dropdown-menu-right">
    <a href="#" class="dropdown-item">Item 1</a>
    <a href="#" class="dropdown-item">Item 2</a>
</div>

<button type="button" class="btn btn-default btn-sm mr-1 dropdown-toggle"
        id="button2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Button 2
</button>

<div aria-labelledby="button2" class="dropdown-menu dropdown-menu-right">
    <a href="#" class="dropdown-item">Item 3</a>
    <a href="#" class="dropdown-item">Cross Cutting Activities</a>
</div>

Answer 1

我找到了解决方法。

按钮和下拉菜单容器需要由btn-group类的div包装：

https://jsfiddle.net/marcvidalmoreno/vyLapn6j/1/

<div class="btn-group">
  <button type="button" class="btn btn-default btn-sm mr-1 dropdown-toggle"
          id="button1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Button 1
  </button>
  <div aria-labelledby="button1"
       class="dropdown-menu dropdown-menu-right">
    <a href="#" class="dropdown-item">
      Item 1
    </a>
    <a href="#" class="dropdown-item">
      Item 2
    </a>
  </div>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-default btn-sm mr-1 dropdown-toggle"
          id="button2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Button 2
  </button>
  <div aria-labelledby="button2"
       class="dropdown-menu dropdown-menu-right">
    <a href="#" class="dropdown-item">
      Item 3
    </a>
  </div>
</div>

Bootstrap 4-两个带有下拉菜单的按钮-第二个按钮显示第一个按钮的内容

1 个答案: