HTML-在引导程序中更改css中的悬停大小-堆栈溢出

顺晟科技

2022-10-19 11:38:16

277

我有一个导航栏，我想知道是否可以改变引导程序4中的悬停大小？我想使菜单链接上的背景尺寸变小。我尝试过此方法:如何更改BS4中悬停的宽度，但对我不起作用。

这是我的HTML:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>Cuppela</title>
    <script src="https://www.cuppela.com/cuppela/js/jquery.min.js" type="text/javascript"></script>
    <script src="https://www.cuppela.com/cuppela/js/bootstrap.min.js" type="text/javascript"></script>
    <link rel="stylesheet" href="https://www.cuppela.com/cuppela/css/bootstrap.min.css" type="text/css">
    <link rel="stylesheet" href="css/test.css" type="text/css">

</head>
<body>
    <div id="nav-menu">
        <nav id="main-nav" class="navbar navbar-expand-md fixed-top">
            <div class="container">
                <ul class="nav navbar-nav mx-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Shop</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">About</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Contact</a>
                    </li>
                </ul>
            </div>
        </nav>
        </div>
<div class="container-fluid" id="top-main"> 

    <div id="top_text">
        <h1>Cuppela Made With Sugar</h1>
        <p>Delicious Homemade Cakes</p>
    </div>
    
    </div>
</div>

<div>
    <h2>Test</h2>
</div>
</body>
</html>

这是我的CSS:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>Cuppela</title>
    <script src="https://www.cuppela.com/cuppela/js/jquery.min.js" type="text/javascript"></script>
    <script src="https://www.cuppela.com/cuppela/js/bootstrap.min.js" type="text/javascript"></script>
    <link rel="stylesheet" href="https://www.cuppela.com/cuppela/css/bootstrap.min.css" type="text/css">
    <link rel="stylesheet" href="css/test.css" type="text/css">

</head>
<body>
    <div id="nav-menu">
        <nav id="main-nav" class="navbar navbar-expand-md fixed-top">
            <div class="container">
                <ul class="nav navbar-nav mx-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Shop</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">About</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Contact</a>
                    </li>
                </ul>
            </div>
        </nav>
        </div>
<div class="container-fluid" id="top-main"> 

    <div id="top_text">
        <h1>Cuppela Made With Sugar</h1>
        <p>Delicious Homemade Cakes</p>
    </div>
    
    </div>
</div>

<div>
    <h2>Test</h2>
</div>
</body>
</html>

编辑：添加了更多说明。

顺晟科技：

您没有清楚地提到您想要什么，但如果您想更改字体大小，您可以简单地做或任何您想要的像素。如果您想要更改锚标记的宽度，那么您可以减少填充，如

我想您想改变菜单链接上背景的大小时：悬停在它们上面。如果是这种情况，编辑填充（或完全删除填充行），您将得到如下内容:

正如您所看到的，没有任何填充会给人一种感觉，在链接的上面比下面多一点橙色背景。这是CSS中填充的一个常见怪癖，所以我建议您添加一个例子，它将元素的顶部、右侧和左侧转换为零填充，而在元素的底部转换为0.2 REM填充。

结果将是：

上一篇：JavaScript-为什么我的重启下一篇：JavaScript-如何停止无限打

网站建设

Html

HTML-在引导程序中更改css中的悬停大小-堆栈溢出