<!DOCTYPE html>
<html lang="en" class="default-style">
<head>
<!--链入外部样式-->
<link rel="stylesheet" type="text/css" href="../bootstrap-5.1.3-dist/css/bootstrap.css">
</head>
<style type="text/css">
.max{
margin: auto;
margin-top: 250px;
width: 500px;
height: 200px;
}
.form-check {
display: inline-block;
}
</style>
<body background="https://pic3.zhimg.com/v2-b74cef27ef47952fd01ecded9255713e_r.jpg">
<div class="max">
<h6 class="card-header">
Inline
</h6>
<div class="card-body">
<form class="form-inline mb-4">
<label class="sr-only">Name</label>
<input type="text" class="form-control mr-sm-2 mb-2 mb-sm-0" placeholder="Jane Doe">
<label class="sr-only">Username</label>
<div class="input-group mr-sm-2 mb-2 mb-sm-0">
<div class="input-group-prepend">
<div class="input-group-text">@</div>
</div>
<input type="text" class="form-control" placeholder="Username">
</div>
<label class="form-check mr-sm-2 mb-2 mb-sm-0">
<input class="form-check-input" type="checkbox" style="margin-top: 20px;">
<div class="form-check-label" style="margin-top: 15px;">
Remember me
</div>
</label>
<button type="submit" class="btn btn-primary" style="float: right; margin: 10px; background: none; color: black;">Submit</button>
</form>
<form class="form-inline">
<label class="form-label mr-sm-2">Preference</label>
<select class="custom-select mr-sm-2 mb-2 mb-sm-0">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<label class="custom-control custom-checkbox mr-sm-2 mb-2 mb-sm-0" style="float: right; ">
<input type="checkbox" class="custom-control-input">
<span class="custom-control-label">Remember my preference</span>
</label>
<center>
<button type="submit" class="btn btn-primary"style="background: none; color: black;">Submit</button>
</center>
</form>
</div>
</div>
</div>
</body>
</html>
2595
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
