时间戳

首页 > 解决方案 > 如何更改bs4中悬停的宽度

css - 如何更改bs4中悬停的宽度

问题描述

我正在寻找导航栏中悬停的解决方案。有没有办法改变引导程序 4 导航栏中悬停的宽度？我尝试在网上搜索，但一无所获。我也意识到这是一个罕见的问题。所以我希望这也能帮助别人。

HTML

<nav class="navbar navbar-expand-lg navbar-dark">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar10">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="navbar-collapse collapse" id="navbar10">
            <ul class="navbar-nav nav-fill w-100">
                <li class="nav-item">
                    <a class="nav-link" href="Index.html">Home</a>
                </li>
                 <li class="nav-item dropdown">
                    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">About Us</a>
                    <div class="dropdown-menu">
                        <a href="#" class="dropdown-item">Introduction</a>
                        <a href="#" class="dropdown-item">Mission</a>
                        <a href="#" class="dropdown-item">Vision</a>
                    </div>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
            </ul>
        </div>
    </nav>

我的 CSS

.navbar{
  background-color:rgb(0,114,187);
  font-family:"Roboto Condensed", "Microsoft YaHei", "Microsoft 
  JhengHei",sans-serif;
}

#navbar10 .navbar-nav .nav-link{
   color:white;
   font-family:"Roboto Condensed", "Microsoft YaHei", "Microsoft 
   JhengHei", sans-serif;
   font-size:14px;
 }

.nav-link:hover{
    color:white;
    background-color:rgb(0,34,59);
 }

.about.dropdown-menu {
    left: 50% !important;
    transform: translateX(-50%) !important;
    top: 100% !important;
 }

.dropdown-menu{
   width:250px;
   margin:0 auto !important;
 }

a.dropdown-item{
   text-align:center;
}

 .dropdown:hover>.dropdown-menu {
    display: block;
 }

结果

我的结果

标签： cssbootstrap-4

解决方案

您可以使用选择器.nav-link:hover：

.nav-link:hover {
    width: 50%;
    margin: 0 auto;
}

这可以在下面看到：

.navbar {
  background-color: rgb(0, 114, 187);
  font-family: "Roboto Condensed", "Microsoft YaHei", "Microsoft 
 JhengHei",sans-serif;

}

#navbar10 .navbar-nav .nav-link {
  color: white;
  font-family: "Roboto Condensed", "Microsoft YaHei", "Microsoft 
 JhengHei", sans-serif;
 font-size:14px;
}

.nav-link:hover {
  color: white;
  background-color: rgb(0, 34, 59);
}

.about.dropdown-menu {
  left: 50% !important;
  transform: translateX(-50%) !important;
  top: 100% !important;
}

.dropdown-menu {
  width: 250px;
  margin: 0 auto !important;
}

a.dropdown-item {
  text-align: center;
}

.dropdown:hover>.dropdown-menu {
  display: block;
}

.nav-link:hover {
    width: 50%;
    margin: 0 auto;
}
<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>

<nav class="navbar navbar-expand-lg navbar-dark">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar10">
            <span class="navbar-toggler-icon"></span>
        </button>
  <div class="navbar-collapse collapse" id="navbar10">
    <ul class="navbar-nav nav-fill w-100">
      <li class="nav-item">
        <a class="nav-link" href="Index.html">Home</a>
      </li>
      <li class="nav-item dropdown">
        <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">About Us</a>
        <div class="dropdown-menu">
          <a href="#" class="dropdown-item">Introduction</a>
          <a href="#" class="dropdown-item">Mission</a>
          <a href="#" class="dropdown-item">Vision</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
    </ul>
  </div>
</nav>

请注意，将 to 更改为display与inline-blocka 组合margin也可能更可取。

推荐阅读