html - 对齐中心下拉菜单 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;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<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>