对齐中心下拉菜单 Bootstrap 4答案

【问题标题】：Align center dropdown-menu Bootstrap 4对齐中心下拉菜单 Bootstrap 4
【发布时间】：2018-06-14 04:27:24
【问题描述】：

我正在尝试将下拉菜单与中心对齐，我正在使用 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>

【问题讨论】：

我的回答解决了你的问题吗？
对不起，我没有看到你的答案。它的工作原理，非常感谢。
非常感谢您告诉我 :)

标签： html css twitter-bootstrap bootstrap-4

【解决方案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>

【讨论】：