Bootstrap下拉式菜单在我的菜单右方抛出

Question

希望你们中的一个人能够帮助我们

我目前正在建立一个网站，并通过代码摸索使用Bootstrap位，我即将完成最后的结束，但我已经遇到了一个问题，我的一个下拉菜单火向右点击时，我已经做了一点google和尝试乱七八糟的代码，但我不能让它坐正确。

HTML如下

        <div class="col-12">
        <div class="text-center">
            <div class="btn-group">
                <button type="button" class="btn btn-dark btn-xs">About Us</button>
        <button type="button" class="btn btn-primary dropdown-toggle btn-xs" data-toggle="dropdown">
                    Programmes
                </button>

                <div class="btn-group">
                <div class="dropdown-menu">
                    <a class="dropdown-item" href="#">Private</a>
                    <a class="dropdown-item" href="#">Veteran</a>
                    <a class="dropdown-item" href="#">Young Adult</a>
                    <a class="dropdown-item" href="#">Sponsor</a>
                    <a class="dropdown-item" href="#">Volunteer</a>
                    <a class="dropdown-item" href="#">Fundraise</a>
                </div>
            </div>

            <div class="btn-group">
                <button type="button" class="btn btn-primary dropdown-toggle btn-xs" data-toggle="dropdown">
                    Media
                </button>

                <div class="dropdown-menu">
                    <a class="dropdown-item" href="#">Pictures</a>
                    <a class="dropdown-item" href="#">Blog</a>
                    <a class="dropdown-item" href="#">Newsletter</a>
                </div>
            </div>
        <button type="button" class="btn btn-dark btn-xs">Donate</button>
    </div>

除了按钮本身的颜色之外，Bootstrap CSS中没有任何改变。

有什么想法吗？

非常感谢!

Answer 1

一切都很好，你只需要包 div 属于 btn-group 上面的程序按钮标签

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>



<div class="col-12">
  <div class="text-center">
    <div class="btn-group">
      <button type="button" class="btn btn-dark btn-xs">About Us</button>
      <div class="btn-group">
        <button type="button" class="btn btn-primary dropdown-toggle btn-xs" data-toggle="dropdown">
          Programmes
        </button>


        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Private</a>
          <a class="dropdown-item" href="#">Veteran</a>
          <a class="dropdown-item" href="#">Young Adult</a>
          <a class="dropdown-item" href="#">Sponsor</a>
          <a class="dropdown-item" href="#">Volunteer</a>
          <a class="dropdown-item" href="#">Fundraise</a>
        </div>
      </div>


      <div class="btn-group">
        <button type="button" class="btn btn-primary dropdown-toggle btn-xs" data-toggle="dropdown">
          Media
        </button>

        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Pictures</a>
          <a class="dropdown-item" href="#">Blog</a>
          <a class="dropdown-item" href="#">Newsletter</a>
        </div>
      </div>
      <button type="button" class="btn btn-dark btn-xs">Donate</button>
    </div>