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

Question

我添加了 2 个具有下拉功能的按钮（Bootstrap 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>