所以我有一个班级＆＃34; formbox＆＃34;当应用于表单时，内容保持可见。但是当你删除它时，它会按预期运行。我试图单独删除每个css规则并进行暴力测试，但这并没有隔离任何东西......有什么想法吗？如果这是一个愚蠢的问题，我道歉！我对前端还有些新意见！
body{
margin:0;
padding:0;
}
a{color:#fff;}
.formbox{
width:100%;
}
.formbox p{
margin:0;
padding:1px;
font-weight:bold;
}
.formbox input{
margin-bottom: 20px;
}
.formbox input[type="email"],
.formbox input[type="text"],
.formbox input[type="password"]
{
background-color : #161925;
border:none;
border-bottom: 2px solid #F1D302;
height:40px;
}
.formbox input[type="email"]:focus,
.formbox input[type="text"]:focus,
.formbox input[type="password"]:focus
{
border-bottom: 2px solid #FDFFFC;
}
textarea, input, button { outline: none; }
.nav>li>a:hover,
.nav>li>a:focus
{
color:#161925;
background-color : #F1D302 ;
}<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>STEMuli</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="/bootstrap/css/bootstrap.css">
<link href="https://fonts.googleapis.com/css?family=Rubik:500" rel="stylesheet">
<link href="/css/mastercss.css" rel="stylesheet">
<link href="/css/newuser.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<!--This is where the logo is-->
<div class="container-fluid">
<div class="row h-100 justify-content-center">
<a name="redirectHome" onClick="redirectHome()"><img src="#" class="img-fluid" width="200" height="400" alt="Responsive image">
</a>
</div>
<div class="row h-100 justify-content-center"> <h4>Type of User</h4></div>
<div class="row h-100 justify-content-center">
<ul class="nav nav-pills mb-3 red" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Student</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Teacher</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Corporation</a>
</li>
</ul>
</div>
<div class="row h-100 justify-content-center">
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
<!--Start of first tab-->
<div class="formbox">
<form class="submission-form">
<p>Name</p>
<input type="text" id="first-name" placeholder="Kylo Ren">
<p>Email</p>
<input type="email" id="email" placeholder="knightsofRen@dark.com">
<p>Password</p>
<input type="password" id="password" name="password" placeholder="●●●●●●●●●●">
<p>Confirm Password</p>
<input type="password" id="cpassword" name="cpassword" placeholder="●●●●●●●●●●">
<p>Grade</p>
<select class="selectpicker">
<optgroup label="Elementary">
<option>1st Grade</option>
<option>2nd Grade</option>
<option>3rd Grade</option>
<option>4th Grade</option>
<option>5th Grade</option>
<option>6th Grade</option>
</optgroup>
<optgroup label="Middle">
<option>7th Grade</option>
<option>8th Grade</option>
</optgroup>
<optgroup label="High">
<option>9th Grade</option>
<option>10th Grade</option>
<option>1th Grade</option>
<option>12th Grade</option>
</optgroup>
</select>
<p>Date of Birth</p>
<input placeholder="MM/DD/YYYY" type="text" id="student-dob" name="student-dob">
<p>Dream Job</p>
<input type="text" id="dream-job" name="dream-job" data-require-pair="#choice-dream-job">
<p>Role Model (favorite athlete, actor, musician)</p>
<input type="text" id="last-name" name="last-name" data-require-pair="#choice-last-name">
<p>Dream University</p>
<input type="text" id="dream-university" name="dream-university" data-require-pair="#choice-last-name">
<p>Career Pathway/Industry</p>
<input type="text" id="student-career" name="student-career" data-require-pair="#choice-last-name">
<p>Favorite Band/Company</p>
<input type="text" id="student-favorite" name="student-favorite" data-require-pair="#choice-last-name">
<p>World problem you would like to solve</p>
<input type="text" id="world-problem" name="world-problem" data-require-pair="#choice-last-name">
</form>
</div>
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">...</div>
<div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">...</div>
</div>
</div>
</div>
<!-- FOOTER -->
<footer class="container">
<div class="row h-100 justify-content-center">
<button class="button"><ahref="#" name="redirectHome" onClick="redirectHome()">Submit</a></button>
</div>
</footer>
</main>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script type="text/JavaScript" src="/js/redirect.js"></script>
<script type="text/JavaScript" src="/js/form.js"></script>
<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>
</body>
</html>
答案 0 :(得分：0)
这是因为你错过了结束标签。所以你的第一个tab-pane包装了另一个标签。
这是工作Snipet
body {
margin: 0;
padding: 0;
}
a {
color: #fff;
}
.formbox {
width: 100%;
}
.formbox p {
margin: 0;
padding: 1px;
font-weight: bold;
}
.formbox input {
margin-bottom: 20px;
}
.formbox input[type="email"], .formbox input[type="text"], .formbox input[type="password"] {
background-color : #161925;
border: none;
border-bottom: 2px solid #F1D302;
height: 40px;
}
.formbox input[type="email"]:focus, .formbox input[type="text"]:focus, .formbox input[type="password"]:focus {
border-bottom: 2px solid #FDFFFC;
}
textarea, input, button {
outline: none;
}
.nav>li>a:hover, .nav>li>a:focus {
color: #161925;
background-color : #F1D302;
}<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>STEMuli</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="/bootstrap/css/bootstrap.css">
<link href="https://fonts.googleapis.com/css?family=Rubik:500" rel="stylesheet">
<link href="/css/mastercss.css" rel="stylesheet">
<link href="/css/newuser.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<!--This is where the logo is-->
<div class="container-fluid">
<div class="row h-100 justify-content-center"> <a name="redirectHome" onClick="redirectHome()"><img src="#" class="img-fluid" width="200" height="400" alt="Responsive image"> </a> </div>
<div class="row h-100 justify-content-center">
<h4>Type of User</h4>
</div>
<div class="row h-100 justify-content-center">
<ul class="nav nav-pills mb-3 red" id="pills-tab" role="tablist">
<li class="nav-item"> <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Student</a> </li>
<li class="nav-item"> <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Teacher</a> </li>
<li class="nav-item"> <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Corporation</a> </li>
</ul>
</div>
<div class="row h-100 justify-content-center">
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
<!--Start of first tab-->
<div class="formbox">
<form class="submission-form">
<p>Name</p>
<input type="text" id="first-name" placeholder="Kylo Ren">
<p>Email</p>
<input type="email" id="email" placeholder="knightsofRen@dark.com">
<p>Password</p>
<input type="password" id="password" name="password" placeholder="●●●●●●●●●●">
<p>Confirm Password</p>
<input type="password" id="cpassword" name="cpassword" placeholder="●●●●●●●●●●">
<p>Grade</p>
<select class="selectpicker">
<optgroup label="Elementary">
<option>1st Grade</option>
<option>2nd Grade</option>
<option>3rd Grade</option>
<option>4th Grade</option>
<option>5th Grade</option>
<option>6th Grade</option>
</optgroup>
<optgroup label="Middle">
<option>7th Grade</option>
<option>8th Grade</option>
</optgroup>
<optgroup label="High">
<option>9th Grade</option>
<option>10th Grade</option>
<option>1th Grade</option>
<option>12th Grade</option>
</optgroup>
</select>
<p>Date of Birth</p>
<input placeholder="MM/DD/YYYY" type="text" id="student-dob" name="student-dob">
<p>Dream Job</p>
<input type="text" id="dream-job" name="dream-job" data-require-pair="#choice-dream-job">
<p>Role Model (favorite athlete, actor, musician)</p>
<input type="text" id="last-name" name="last-name" data-require-pair="#choice-last-name">
<p>Dream University</p>
<input type="text" id="dream-university" name="dream-university" data-require-pair="#choice-last-name">
<p>Career Pathway/Industry</p>
<input type="text" id="student-career" name="student-career" data-require-pair="#choice-last-name">
<p>Favorite Band/Company</p>
<input type="text" id="student-favorite" name="student-favorite" data-require-pair="#choice-last-name">
<p>World problem you would like to solve</p>
<input type="text" id="world-problem" name="world-problem" data-require-pair="#choice-last-name">
</form>
</div>
</div> <!-- missed closing tag -->
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">...</div>
<div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">...</div>
</div>
</div>
</div>
<!-- FOOTER -->
<footer class="container">
<div class="row h-100 justify-content-center">
<button class="button"><ahref="#" name="redirectHome" onClick="redirectHome()">Submit</a></button>
</div>
</footer>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script type="text/JavaScript" src="/js/redirect.js"></script>
<script type="text/JavaScript" src="/js/form.js"></script>
<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>
</body>
</html>