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

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>