Question

我在使按钮显示为活动状态时遇到问题。目前，它们实际上什么也没做，但是它们似乎并没有表现出悬停效果。我曾尝试为它们添加效果，但是当我这样做时似乎什么都没有改变。

我尝试删除CSS的所有不同部分，并且当从容器中删除填充时，按钮再次变为活动状态，但这仅在某些时候发生吗？

我不确定自己在做什么错，我显然是一个完整的n00b，因为这是我第一次真正尝试制作一个实际的网站，并且只是为了好玩而玩html / css。

如果您有任何建议，请告诉我，非常感谢！

.container {
  padding: 10%;
}

h1 {
  color: #FFEA9F;
  margin: 0 auto 0 auto;
  font-size: 30px;
  letter-spacing: 15px;
  font-family: 'Fira Code', monospace;
  text-align: center;
}

body {
	border: 20px;
	padding: 20px;
	margin: 0 auto 0 auto;
	background:linear-gradient(to right,#FFE899,#F48C30);
}

.bottom {
	position:fixed;
  bottom: 0;
  width: 100%;
  left: 0;
}


#mainNav {
  font-weight: 100;
  opacity: 0.9;
  font-family: "Nunito", sans-serif;
}

#mainNav .navbar-brand {
  color: #FFEA9F;
}

#mainNav .nav-link {
  color: #FFEA9F;
}

#mainNav .nav-link:hover {
  color: #F48C30;
}

.collapse {
  color: #FFEA9F;
}

.button {
  background-color: #8C1909; 
  border: none;
  color: #FFEA9F;
  /*padding: 10px 25px;*/
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 36px;
  letter-spacing: 5px;
  font-family: 'Fira Code', monospace;
  opacity: 0.8;
  border-radius: 8px;
  box-shadow: 1px 1px #544D4D;
  grid-row-start:1;
}

.button2 {
  background-color: #8C1909; 
  border: none;
  color: #FFEA9F;
  text-align: center;
  display: inline-block;
  font-size: 36px;
  letter-spacing: 5px;
  font-family: 'Fira Code', monospace;
  opacity: 0.8;
  border-radius: 8px;
  box-shadow: 1px 1px #544D4D;
}

<link rel="stylesheet" type="text/css" href="testing2.css">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Fira+Code|Red+Hat+Text&display=swap" rel="stylesheet">


<body>
<nav id="mainNav" class="navbar fixed-top navbar-dark navbar-expand-md" style="background-color: #8C1909">
                <a href="#" class="navbar-brand">HOME</a>
                <button class="navbar-toggler" data-toggle="collapse" data-target="#navLinks" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navLinks">
                    <ul class="navbar-nav">
                        <li class="nav-item">
                            <a href="https://google.com/maps" class="nav-link">MAPS</a>
                        </li>
                        <li class="nav-item">
                            <a href="https://instagram.com/venture.mars" class="nav-link"><i class="fab fa-instagram"></i></a>
                        </li>
                    </ul>
                </div>
            </nav>

<div class="container">
	<h1 class="text-center">VENTURE.MARS</h1>
	<div class="d-flex justify-content-around align-items-center flex-column flex-md-row" style="height: 200px">
		<button class="button" type="submit">CREATE</button>
		<button class="button2" type="submit">EXPLORE</button>
	</div>

</div>


<div class="bottom">
	<img src="background_bottom2.svg">
</div>
</body>

我希望按钮保持活动状态，而无需填充。

对于您可能会看到的其他问题的反馈，我们将不胜感激，任何帮助！几年前，我由一位了不起的讲师讲授Java，他总是在不使用变通办法的情况下，使我们的代码尽可能实用。尽管我觉得我一直在创建许多变通办法来尝试自己找出html / css。

Answer 1

使用引导程序时，navbar-brand仅应用于品牌（网站名称）。您不应该对每个导航栏元素都使用它。您应该对链接的导航栏项目使用.nav-item nav-link。

好奇为什么不将其格式化为带有导航ul列表项的li元素？编辑：应该提到它不是必需的，但这是非常标准的。

请访问导航栏的文档，因为它肯定会有所帮助。 https://getbootstrap.com/docs/4.0/components/navbar/#brand

此外，您可能要使用ID来设置样式的特异性，并使用伪选择器a：active a：visited确保访问链接或激活链接后颜色保持不变。

将填充添加到容器后，为什么按钮不起作用？

1 个答案: