【发布时间】：2019-12-19 08:16:30
【问题描述】：
我在使我的按钮显示为活动状态时遇到问题。目前，它们实际上并没有做任何事情，但它们甚至看起来都没有悬停效果。我已经尝试为它们添加效果，但是当我这样做时似乎没有任何改变。
我已尝试删除 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。
【问题讨论】：
-
不清楚您所说的“活跃”是什么意思。如果我们正在谈论“创建”和“探索”按钮，则它们处于活动状态，如光标悬停在它们上时会发生变化所示。 “我已经尝试为它们添加效果” - 请在此处展示您尝试过的内容。
-
我最终用更多的组织重写了整个代码，它似乎正在工作。我遇到的唯一问题是无法在顶部添加带有 img 的背景颜色，所以我只使用了 img。谢谢大家的帮助！
标签： html css button hyperlink bootstrap-4