我正在使用bootstrap的例子为我的登录页面。它被称为 浮动标签.我遇到的唯一的问题是. 输入栏 不能得到尽可能大的大小,它应该是在例子中。我是网络编程的新手,任何帮助、技巧和建议都会非常感激。对不起,这可能是一个愚蠢的问题。谢谢你的帮助。
这是我的观点。
<html>
<head>
<title>Floating labels example · Bootstrap</title>
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
</style>
<!-- Custom styles for this template -->
<link href="~/Content/floating-labels.css" rel="stylesheet">
</head>
<body>
<form class="form-signin">
<div class="text-center mb-4">
<img class="mb-3" src="~/Images/Logo.png" alt="" width="100" height="72">
<p>
“The kitchen is a place of adventure and entirely fun, not drudgery. I can’t think of anything better to do with family and friends than to be together to create something.” – Ted Allen
</p>
</div>
<div class="form-label-group">
<input type="text" id="inputUsername" class="form-control" placeholder="Username" autocomplete="off" required autofocus>
<label for="inputUsername">Username</label>
</div>
<div class="form-label-group">
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
<label for="inputPassword">Password</label>
</div>
<div class="checkbox mb-3">
<label>
<input type="checkbox" value="remember-me"> Remember me
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
<p class="mt-5 mb-3 text-muted text-center">© 2017-2020</p>
</form>
</body>
</html>
这是我的CSS。
html,
body {
height: 100%;
}
body {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
padding-top: 40px;
padding-bottom: 40px;
background-color: #f5f5f5;
}
.form-signin {
width: 100%;
max-width: 420px;
padding: 15px;
margin: auto;
align-self: center;
}
.form-label-group {
position: relative;
margin-bottom: 1rem;
}
.form-label-group > input,
.form-label-group > label {
height: 3.125rem;
padding: .75rem;
}
.form-label-group > label {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
margin-bottom: 0; /* Override default `<label>` margin */
line-height: 1.5;
color: #495057;
pointer-events: none;
cursor: text; /* Match the input under the label */
border: 1px solid transparent;
border-radius: .25rem;
transition: all .1s ease-in-out;
}
.form-label-group input::-webkit-input-placeholder {
color: transparent;
}
.form-label-group input:-ms-input-placeholder {
color: transparent;
}
.form-label-group input::-ms-input-placeholder {
color: transparent;
}
.form-label-group input::-moz-placeholder {
color: red;
}
.form-label-group input::placeholder {
color: transparent;
}
.form-label-group input:not(:placeholder-shown) {
padding-top: 1.25rem;
padding-bottom: .25rem;
}
.form-label-group input:not(:placeholder-shown) ~ label {
padding-top: .25rem;
padding-bottom: .25rem;
font-size: 12px;
color: #777;
}
/* Fallback for Edge
-------------------------------------------------- */
@supports (-ms-ime-align: auto) {
.form-label-group > label {
display: none;
}
.form-label-group input::-ms-input-placeholder {
color: #777;
}
}
/* Fallback for IE
-------------------------------------------------- */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.form-label-group > label {
display: none;
}
.form-label-group input:-ms-input-placeholder {
color: #777;
}
}
/* From Index(floating-labels)
-------------------------------------------------- */
@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
我确实审查了你的代码,只是检查你的自定义CSS是否正确链接.并检查你的CDN或本地bootstrap文件是否链接!如果你会正确链接,你会得到你正在寻找的东西!