【发布时间】：2021-05-03 15:09:09
【问题描述】：
我正在使用这个 github 包中的 Materialize-stepper - https://github.com/Kinark/Materialize-stepper。我正在应用所需的所有链接，但由于某种原因，布局看起来应该如此。我什至在文件中添加了 css 内容。比如这是用户提供的codepen链接——https://codepen.io/Kinark/pen/VKrjJp
下面是我的代码，完全相同。我做错了什么？
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="mstepper.css" />
<script type="text/javascript" src="mstepper.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<style>
.btn,
.btn-large,
.btn-small,
.btn-flat {
border-radius: 4px;
font-weight: 500;
}
.card:hover {
box-shadow: 0px 10px 35px 0px rgba(0, 0, 0, 0.18);
}
.card {
border-radius: 15px;
box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.15);
}
</style>
<body>
<div class="section grey lighten-5">
<div class="container">
<div class="row">
<div class="col xl4 l6 m10 s12 offset-xl4 offset-l3 offset-m1">
<h3 class="light center-align blue-text">Sign up form</h3>
<div class="card">
<div class="card-content">
<ul data-method="GET" class="stepper linear">
<li class="step active">
<div class="step-title waves-effect waves-dark">E-mail</div>
<div class="step-content">
<div class="row">
<div class="input-field col s12">
<input id="email" name="email" type="email" class="validate" required>
<label for="email">Your e-mail</label>
</div>
</div>
<div class="step-actions">
<button class="waves-effect waves-dark btn blue next-step"
data-feedback="anyThing">Continue</button>
</div>
</div>
</li>
<li class="step">
<div class="step-title waves-effect waves-dark">Step 2</div>
<div class="step-content">
<div class="row">
<div class="input-field col s12">
<input id="password" name="password" type="password" class="validate"
required>
<label for="password">Your password</label>
</div>
</div>
<div class="step-actions">
<button class="waves-effect waves-dark btn blue next-step">CONTINUE</button>
<button class="waves-effect waves-dark btn-flat previous-step">BACK</button>
</div>
</div>
</li>
<li class="step">
<div class="step-title waves-effect waves-dark">Callback</div>
<div class="step-content">
End!!!!!
<div class="step-actions">
<button class="waves-effect waves-dark btn blue next-step"
data-feedback="noThing">ENDLESS CALLBACK!</button>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
$(document).ready(function () {
function anyThing(destroyFeedback) {
setTimeout(function () { destroyFeedback(true); }, 1500);
}
function noThing(destroyFeedback) {
setTimeout(function () { destroyFeedback(true); }, 10000);
}
var stepperDiv = document.querySelector('.stepper');
console.log(stepperDiv);
var stepper = new MStepper(stepperDiv);
});
</script>
【问题讨论】：
标签： javascript html css