动态调整按钮填充

问题描述 投票：0回答：1

我有这个按钮，它使用 

bi-list
图标，将鼠标悬停在上面时会增加 5 像素。我喜欢这个，但我在尝试这样做时遇到的唯一问题是它还增加了按钮的大小，这反过来又完全破坏了我的导航栏的响应能力。如何设置按钮动态更改内部填充，以适应图标大小的变化？

未悬停在：

悬停在：

("use strict");

// Navbar Dropdown
$(".dropdown-toggle").click(function() {
  $(this).next(".dropdown-menu").slideToggle(600);
});
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap");
@import url("https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css");
header {
  background: black;
}


/*navbar begin*/

.navbar {
  height: 60px;
}

.navbar-brand {
  --bs-navbar-brand-padding-y: 0px;
  --bs-navbar-brand-margin-end: 0px;
}

.navbar-brand-text {
  background: linear-gradient(to right, red, magenta, magenta, lime);
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 300% 100%;
  background-position: left center;
  transition: background 0.18s linear;
}

.navbar-brand:hover {
  .navbar-brand-text {
    background-position: 100% center;
  }
}

.navbar-brand:focus {
  outline: 2px solid #ffffff;
}

@media (max-width: 576px) {
  .navbar-brand>.navbar-brand-text {
    display: none;
  }
}

@media (max-width: 370px) {
  .navbar-brand {
    display: none;
  }
}

.navbar-toggler {
  border-radius: 10px !important;
  padding: 5px 10px !important;
}

.navbar-toggler:focus {
  box-shadow: 0px 0px 0px 3px rgba(255, 0, 0, 0.7) !important;
}

.nav-link {
  color: #808080;
  transition: color linear 0.18s;
}

.nav-link:hover {
  color: #ff00ff;
}

.nav-link:focus {
  color: #ff00ff;
}


/*navbar end*/


/*dropdown begin*/

.dropdown-menu {
  background: #111;
  --bs-dropdown-min-width: 100px;
  --bs-dropdown-border-radius: 10px;
  --bs-dropdown-border-width: 2px;
  --bs-dropdown-border-color: #ff0000;
}

.dropdown-menu a {
  color: #808080;
  transition: color linear 0.18s;
}

.dropdown-menu a:hover {
  color: #ff00ff;
  background-color: #111;
}

.dropdown-menu a:focus {
  color: #ff00ff;
  background-color: #111;
}

.dropdown-divider {
  border-top: 1px solid #252424;
}

.dropdown-item:active {
  background: #111 !important;
}

.dropdown-item:focus {
  background-color: #111;
  color: #ff00ff !important;
}


/*dropdown end*/

/* start icons */
.navbar-toggler .bi-list {
    font-size: 30px;
    color: #969696;
    transition: font-size 0.18s linear, color 0.18s linear;
}

.navbar-toggler:hover {
    .bi-list {
        font-size: 35px;
        color: #ff0000;
    }
}

/* end icons */
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Cratex Studios</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous" />
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous" />
  <link rel="icon" type="image/x-icon" href="assets/images/favicon.ico" />
  <link href="assets/css/style.css" rel="stylesheet" />
</head>

<body>
  <header>
    <nav class="navbar navbar-dark bg-dark" aria-label="navbar">
      <div class="container-fluid justify-content-between">
        <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#leftMainNav" aria-controls="leftMainNav" aria-label="Toggle left navigation">
                        <i class="bi-list"></i>
                    </button>
        <a class="navbar-brand" href="index.php">
          <img style="width: 30px" src="assets/images/logo-l.png" />
          <span class="navbar-brand-text">Example Brand</span>
        </a>
        <div class="d-flex" style="width: 240px">
          <ul class="navbar-nav">
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" role="button" aria-expanded="false">Company</a>
              <ul class="dropdown-menu position-absolute" style="top: 55px; width: 110px">
                <li><a class="dropdown-item text-center" href="about.php">About Us</a></li>
                <li>
                  <hr class="dropdown-divider" />
                </li>
                <li>
                  <a class="dropdown-item text-center" href="company/mission.php">Mission</a>
                </li>
                <li>
                  <hr class="dropdown-divider" />
                </li>
                <li>
                  <a class="dropdown-item text-center" href="company/partners.php">Partners</a>
                </li>
                <li>
                  <hr class="dropdown-divider" />
                </li>
                <li>
                  <a class="dropdown-item text-center" href="company/affiliates.php">Affiliates</a>
                </li>
                <li>
                  <hr class="dropdown-divider" />
                </li>
                <li>
                  <a class="dropdown-item text-center" href="company/legal.php">Legal Info</a>
                </li>
                <li>
                  <hr class="dropdown-divider" />
                </li>
                <li>
                  <a class="dropdown-item text-center" href="company/support.php">Support</a>
                </li>
                <li>
                  <hr class="dropdown-divider" />
                </li>
                <li><a class="dropdown-item text-center" href="company/team.php">Our Team</a></li>
              </ul>
            </li>
          </ul>
          <button type="button" class="btn btn-menu mt-1 ms-2 me-2" data-bs-toggle="modal" data-bs-target="#signupModal">
                            Sign Up
                        </button>
          <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#rightMainNav" aria-controls="rightMainNav" aria-label="Toggle right navigation">
                            <span class="navbar-toggler-icon"></span>
                        </button>
        </div>
        <div class="offcanvas offcanvas-end bg-dark" tabindex="-1" id="rightMainNav" aria-labelledby="rightMainNav">
          <div class="offcanvas-header">
            <button type="button" class="btn-close btn-close-white justify-content-end" data-bs-dismiss="offcanvas" aria-label="Close"></button>
            <h5 class="offcanvas-title" id="rightMainNavLabel">Offcanvas</h5>
          </div>
          <div class="offcanvas-body justify-content-end">
            <ul class="navbar-nav text-end">
              <li class="nav-item">
                <a class="nav-link active-link" aria-current="page" href="#">Home</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
              </li>
            </ul>
          </div>
        </div>
        <div class="offcanvas offcanvas-start bg-dark" tabindex="-1" id="leftMainNav" aria-labelledby="leftMainNav">
          <div class="offcanvas-header">
            <h5 class="offcanvas-title" id="leftMainNavLabel">Offcanvas</h5>
            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
          </div>
          <div class="offcanvas-body">
            <ul class="navbar-nav d-flex">
              <li class="nav-item">
                <a class="nav-link active-link" aria-current="page" href="#">Home</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </nav>
  </header>
</body>

这是我目前正在处理的左侧切换按钮。

我尝试过使用 

scale()
和使用 
calc()
功能。

html css bootstrap-5
1个回答
0
投票

感谢Cbroe，我已经弄清楚是什么阻止了它的工作。 

scale()
函数不适用于内联元素。请务必将 
display: inline-block
添加到您想要动态调整大小的任何图标。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.