私はブートストラップを使って自分のログインページを反応させるつもりです。しかし、コード内にブートストラップリンクを追加すると、HTMLの表示が何らかの理由で影響を受けます。私はなぜそれがあるのか知りたいのですが、あなたに私のヒントを教えてもらえますか?ログインページをどのように反応させることができますか?ブートストラップリンクを追加するとコードが変わるのですか?
マイコード:
body {
width: auto;
margin:0;
padding:0;
}
@font-face {
font-family: "Gidole";
src: url(CODE Light.otf);
}
h2 {
text-align: center;
}
.container {
width: 960px;
height: 500px;
margin-left: auto;
margin-right: auto;
position: relative;
}
.row {
width: 320px;
position: absolute;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
color: #191919;
background-color: green;
box-shadow: 0 1px 1px #ABBEB5;
font-family: "Gidole", sans-serif;
padding: 10px 55px 40px;
border: 1px solid black;
}
input[type=text],[type=password] {
width: 97%;
height: 22px;
padding-left: 5px;
margin-bottom: 20px;
margin-top: 8px;
color: #191919;
font-family: "Gidole", sans-serif;
margin-top:5px;
}
#login {
width: 100%;
margin-top: 5px;
padding: 10px;
font-weight: bold;
cursor: pointer;
/* display: block; use for centering */
display: block;
color: #000000;
}
#signup {
color: #191919;
margin-top: 5px;
cursor: pointer;
font-size: 12px;
text-align: center;
display: block
}
#forgotpass {
color: #191919;
cursor: pointer;
font-size: 12px;
text-align: center;
display: block
}
<link rel="stylesheet" href="bootstrap/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
<div class="container">
<div class="row">
<h2> User Login </h1>
<div class="myForm1">
<form action="p1.php" method="POST">
<input type="text" name="username" placeholder="Username" /> <br/>
<input type="password" name="password" placeholder="Password" /> <br/>
<input type="submit" name="submit" id="login"/>
</form>
<form action="register.php" method="POST">
<p> <a href="register.php" name="register" id="signup"> Sign up </a> </p>
<p> <a href="" name="register" id="forgotpass"> Forgot password? </a> </p>
</form>
</div>
</div>
</div>
はイメージです:ブートストラップリンクが追加された場合はここで はイメージです
あなたの画像は壊れています.... –
私はすでにそれを編集しました。また、それは私の最後に表示されます。 – studentAir01
彼らは今働いています –