Question

如何将插入符号放在下拉菜单中？这是我到现在为止所得到的。

这就是我想要的。我正试着像Github上的这个下拉菜单一样定位箭头。

这是我的下拉菜单的代码：

<div class="container">
  <div class="row">
    <div class="col-md pl-4 user-dropdown">
      <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 text-center mt-2">
          <span><i class="caret-up fas fa-caret-up ml-2"></i></span>
          <li>
            <a href="{{ route('login') }}">
              <button type="button" class="btn btn-warning text-dark">Sign-in now</button>
            </a>
          </li>
          <div class="dropdown-divider"></div>
          <li>
            <h6>Don't have an account?</h6>
            <a href="{{ route('register') }}">Sign-up here</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

.container {
  background-color: black;
  height: 100%;
}

.user-dropdown .dropdown-menu {
  left: 0;
  transform: translateX(-50%) !important;
  top: 100% !important;
}

.arrow-up {
  width: 0px;
  height: 0px;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #FFFFFF;
  margin: 0 0 15px 0;
  position: absolute;
  top: -9px;
  right: 0;
}

<head>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-md pl-4 user-dropdown">
        <div class="dropdown">
          <a class="navbar-brand dropdown-toggle" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            B<i class="fas fa-user"></i>
          </a>
          <div class="dropdown-menu text-center mt-2">
            <div class="arrow-up"></div>
            <a href="{{ route('login') }}">
              <button type="button" class="btn btn-warning text-dark">Sign-in now</button>
            </a>
            <div class="dropdown-divider"></div>
            <h6>Don't have an account?</h6>
            <a href="{{ route('register') }}">Sign-up here</a>
          </div>
        </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>
</body>

将插入符号放在下拉菜单Bootstrap 4上

1 个答案: