如何在下拉引导程序 4 中放置图像以设置边框答案

【问题标题】：How to place image to set border in dropdown bootstrap4如何在下拉引导程序 4 中放置图像以设置边框
【发布时间】：2018-10-25 08:56:57
【问题描述】：

我正在使用 bootstrap 4 导航栏来创建我的菜单。在我的菜单中，我有一个下拉菜单。我想自定义我的下拉顶部边框，但问题是顶部边框看起来像 image。

我正在尝试添加一个带有下拉菜单的 png 图像，以便顶部边框可以更改，但它看起来不像边框，它也会留下一些边距。

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
</head>

<style>
.dropdown {list-style: none; background: green; display: inline-block;}
.dropdown .nav-link {color:#fff; text-decoration: none;}
.dropdown .dropdown-menu a{color: #000; text-decoration: none;}
.dropdown .dropdown-menu{background-image: url("images/arrow.png"); background-repeat: no-repeat;
    background-size: 20px 20px;
	}
.dropdown .btn {background: green; color:#fff;}
.dropdown .btn:hover {background: cyan; color:#000;}
.dropdown .btn:active {background: cyan; color:#000;}
.dropdown .btn:focus {background: cyan; color:#000;}
 .dropdown-item {display: inline-block; width: 100%; padding: 10px 5px;}
.container .dropdown .dropdown-menu a:hover
{
  color: #fff;
  background-color: #b91773;
  border-color: #fff;
}
</style>

<body>

<div class="container">
  <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
          aria-expanded="false">
  Dropdown link
</a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
</div>

</body>
</html>

【问题讨论】：

标签： javascript css bootstrap-4

【解决方案1】：

我在 background-size 属性中使用了100% 6px。这是想要的输出吗？

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
</head>

<style>
.dropdown {list-style: none; background: green; display: inline-block; }
.dropdown .nav-link {color:#fff; text-decoration: none;}
.dropdown .dropdown-menu a{color: #000; text-decoration: none;}
.dropdown .dropdown-menu{
    background-size: 100% 6px;
    background-image: url("https://simimaging.co.uk/wp-content/themes/theme1491_RWD/images/divider.png"); 
    background-repeat: no-repeat;
	}
  .dropdown-menu{
  margin-top:20px;
  border-top:none;}
.dropdown .btn {background: green; color:#fff;}
.dropdown .btn:hover {background: cyan; color:#000;}
.dropdown .btn:active {background: cyan; color:#000;}
.dropdown .btn:focus {background: cyan; color:#000;}
 .dropdown-item {display: inline-block; width: 100%; padding: 10px 5px;}
.container .dropdown .dropdown-menu a:hover
{
  color: #fff;
  background-color: #b91773;
  border-color: #fff;
}

.dropdown-item:nth-of-type(1) {
}
</style>

<body>

<div class="container">
  <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
          aria-expanded="false">
  Dropdown link
</a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
</div>

</body>
</html>

【讨论】：

感谢 rv7。它更接近我想要的输出。我可以将此图像旋转 180 度指向下拉菜单吗？ n 我不希望这张图片有边框
@shreya_js 你可以用一些编辑工具来旋转这张图片，用css做会更容易
但现在的问题是我想要顶部下拉项下方的向上箭头。它只会在打开时显示
检查更新，现在您可以看到顶部下拉项下方的箭头
我需要以下链接...bootsnipp.com/snippets/featured/bootstrap-mega-menu。完成