我尝试将下拉菜单与中心对齐,我使用的是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>
答案 0 :(得分:3)
使用此
.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>