对齐中心下拉菜单 Bootstrap 4

Question

我正在尝试将下拉菜单与中心对齐，我正在使用 Bootstrap 4。

我正在关注这个例子：

[

这就是我得到的：

[

这是我的代码：

<div class="container">
  <div class="row">
    <div class="col-md pl-4 user-dropdown text-center">
      <div class="dropdown btn-group">
        <a class="navbar-brand dropdown-toggle" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-user"></i></a>
        <ul class="dropdown-menu">
          <li>
            <a href="{{ route('logout') }}" onclick="event.preventDefault(); document.getElementById('frm-logout').submit();">
                                        Logout
                                    </a>
            <form id="frm-logout" action="{{ route('logout') }}" method="POST" style="display: none;">
              {{ csrf_field() }}
            </form>
            <hr>
          </li>
          <li><a href="{{ route('user.profile') }}">My Profile</a></li>
        </ul>
      </div>
    </div>
    <div class="col-md">
      <span><a class="navbar-brand" href="#"><i class="fas fa-shopping-cart"></i></a></span>
    </div>
    <div class="col-md">
      <span><a class="navbar-brand" href="#"><i class="fas fa-heart"></i></a></span>
    </div>
  </div>
</div>

Answer 1

用这个

.user-dropdown .dropdown-menu {
  left: 50% !important;
  transform: translateX(-50%) !important;
  top: 100% !important;
}

.user-dropdown .dropdown-menu {
  left: 50% !important;
  transform: translateX(-50%) !important;
  top: 100% !important;
}

.user-dropdown .dropdown-menu {
  left: 50% !important;
  transform: translateX(-50%) !important;
  top: 100% !important;
}