Html 引导网格/布局
我对bootstrap还不太熟悉,而且我正在为一些布局设置而挣扎。我想创建一个居中的表单,其右侧有一个与表单框顶部内联的工具提示/框表单。下面是我目前的表格,我将附上一张我正在努力实现的目标的照片。我已经尝试了很长一段时间,但最近我来的是把它集中在页面的中间或低于现有的形式。Html 引导网格/布局,html,css,bootstrap-grid,Html,Css,Bootstrap Grid,我对bootstrap还不太熟悉,而且我正在为一些布局设置而挣扎。我想创建一个居中的表单,其右侧有一个与表单框顶部内联的工具提示/框表单。下面是我目前的表格,我将附上一张我正在努力实现的目标的照片。我已经尝试了很长一段时间,但最近我来的是把它集中在页面的中间或低于现有的形式。 我正在努力实现的目标:(橙色方框) 当前html: 栈溢出 基础知识 同侧阴唇 Lorem ipsum door坐在阿梅特·康塞特图尔(amet Concertetur),一位精英。什么,比泰? 康塞昆图尔区 账
我正在努力实现的目标:(橙色方框) 当前html:
栈溢出
基础知识
同侧阴唇
Lorem ipsum door坐在阿梅特·康塞特图尔(amet Concertetur),一位精英。什么,比泰?
康塞昆图尔区
账号:
电邮:
确保这是你的私人电子邮件-你
需要使用它进行验证才能登录。
这将是您的用户名
名字
姓:
密码:
年月日
密码:
我接受这个建议
报名
看看设计,你需要同样的设计。因为,我做的和你附上的照片一样。它向我展示了所有视图中的相同内容。
我在下面强调了他们的错误。请下次再看这个
- 首先,您必须在HTML文件中添加引导CDN以使用引导类
- 其次,不要忘记关闭标签。他们的设计在很多地方都没有结束语,这就是为什么它的设计没有正确展示的原因
试着用这种格式编写代码,以便知道哪个结束标记是正确的
失踪
- 第三,他们不需要采取。h-100类在身体和每个div标签或容器它自动。如果你想在任何地方降低高度
然后你可以使用CSS来降低高度
栈溢出
基础知识
同侧阴唇
Lorem ipsum door坐在阿梅特·康塞特图尔(amet Concertetur),一位精英。什么,比泰?
康塞昆图尔区
账号:
电邮:
确保这是你的私人电子邮件-你
需要使用它进行验证才能登录。
这将是您的用户名
名字
姓:
密码:
年月日
密码:
我接受这个建议
报名
我最终找到了自己的解决方案。为了解决我的问题,我对包含表单和这个新盒子的容器进行了调整。如下文所示
解决方案:
基础知识
同侧阴唇
Lorem ipsum door坐在阿梅特·康塞特图尔(amet Concertetur),一位精英。什么,比泰?
康塞昆图尔区
账号:
查看您的欢迎包或电话
1800 000美元寻求帮助
电邮:
确保这是你的私人电子邮件-你
W
<html lang="en">
<head>
<title>Stackoverflow</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row my-3">
<div class="col-1 col-md-2 col-lg-3"></div>
<div class="col-10 col-md-8 col-lg-6 my-3 border">
<!-- Form -->
<form class="border" action="" method="post" class="my-3">
<h1>ABC</h1>
<h2>Lorem ipsum dolor</h2>
<p class="description">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quae, beatae?
Consequuntur qu</p>
<!-- Input fields -->
<div class="form-group">
<label class="sr-only" for="accountNumber">Account number:</label>
<input type="text" class="form-control accountNumber" id="accountNumber"
placeholder="Account number..." name="accountNumber">
</div>
<div class="form-group">
<label class="sr-only" for="email">Email:</label>
<input type="text" class="form-control email" id="email" placeholder="Email..." name="email">
<small id="emailHelpBlock" class="form-text text-muted">Make sure it's your personal email - you
will need to use it for verification to log in.
</small>
</div>
<div class="alert alert-primary" role="alert"> <span class="icon oi oi-info"></span>This will be your username
</div>
<div class="form-group">
<label class="sr-only" for="firstName">First Name <input type="text" class="form-control firstName" id="firstName" placeholder="First name..."
name="firstName"></label>
</div>
<div class="form-group">
<label class="sr-only" for="surname">Surname:</label>
<input type="text" class="form-control surname" id="surname" placeholder="Surname..."
name="surname">
</div>
<div class="form-group">
<label class="sr-only" for="dateOfBirth">Password:</label>
<input type="text" class="form-control dateOfBirth" id="dateOfBirth"
placeholder="Date of birth..." name="dateOfBirth">
<small id="dateOfBirthHelpBlock" class="form-text text-muted">
DD/MM/YYYY
</small>
</div>
<div class="form-group">
<label class="sr-only" for="password">Password:</label>
<input type="password" class="form-control password" id="password" placeholder="Password..."
name="password">
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="gridCheck">
<label class="form-check-label" for="gridCheck">I accept the</label>
<span>
<a href="#">Terms and Conditions</a>
</span>
</div>
<button type="submit" class="btn btn-primary btn-block">Signup</button>
</div>
<!-- End input fields -->
</form>
<!-- Form end -->
</div>
<div class="col-1 col-md-2 col-lg-3></div>
</div>
</div>
</body>
<body>
<div class="container h-100 mt-5">
<div class="row h-100 justify-content-center">
<div class="col-10 col-md-8 col-lg-6 ">
<!-- Form -->
<form class="" action="" method="post">
<h1>ABC</h1>
<h2>Lorem ipsum dolor</h2>
<p class="description">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quae, beatae?
Consequuntur qu</p>
<!-- Input fields -->
<div class="form-group">
<label class="sr-only" for="accountNumber">Account number:</label>
<input type="text" class="form-control accountNumber" id="accountNumber"
placeholder="Account number..." name="accountNumber">
<small id="accountNumberHelpBlock" class="form-text text-muted">Check your Welcome Pack or call
us 1800 000 000 for help
</small>
</div>
<div class="form-group">
<label class="sr-only" for="email">Email:</label>
<input type="text" class="form-control email" id="email" placeholder="Email..." name="email">
<small id="emailHelpBlock" class="form-text text-muted">Make sure it's your personal email - you
will need to use it for verification to log in.
</small>
<div class="alert alert-primary" role="alert"> <span class="icon oi oi-info"></span>This will be
your
username</div>
</div>
<div class="form-group">
<label class="sr-only" for="firstName">First Name:</label>
<input type="text" class="form-control firstName" id="firstName" placeholder="First name..."
name="firstName">
<small id="firstNameHelpBlock" class="form-text text-muted">This is the name that is shown on
your Welcome Pack
</small>
</div>
<div class="form-group">
<label class="sr-only" for="surname">Surname:</label>
<input type="text" class="form-control surname" id="surname" placeholder="Surname..."
name="surname">
</div>
<div class="form-group">
<label class="sr-only" for="dateOfBirth">Password:</label>
<input type="text" class="form-control dateOfBirth" id="dateOfBirth"
placeholder="Date of birth..." name="dateOfBirth">
<small id="dateOfBirthHelpBlock" class="form-text text-muted">
DD/MM/YYYY
</small>
</div>
<div class="form-group">
<label class="sr-only" for="password">Password:</label>
<input type="password" class="form-control password" id="password" placeholder="Password..."
name="password">
</div>
<div class="form-group">
<label class="sr-only" for="password2">Confirm Password:</label>
<input type="password" class="form-control password" id="password2"
placeholder="Confirm your password..." name="password">
</div>
<div class="form-group">
<div class="form-check mb-2">
<input class="form-check-input" type="checkbox" id="gridCheck">
<label class="form-check-label" for="gridCheck">
I accept the
</label>
<span>
<a href="#">Terms and Conditions</a>
</span>
<button type="submit" class="btn btn-primary float-right">Register for access</button>
</div>
<!-- End input fields -->
</form>
<!-- Form end -->
</div>
</div>
<div class="border col-lg-3 box">
<div class="help1 border-bottom">
<h4><span class="icon oi oi-question-mark"></span>Need some help?</h4>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quasi totam vel, cum reiciendis tenetur
quia ullam soluta. Praesentium minus explicabo ducimus mollitia dolorum, ipsam tenetur, et
voluptatum quae, nostrum atque!
</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, rem. Incidunt molestiae
repellendus
et sunt iure perferendis saepe ipsam.
</p>
</div>
<div class="help2 border-bottom">
<h4 class="mt-2"><span class="icon oi oi-person"></span>Already registered?</h4>
<a href="#" class="btn btn-light btn-sm btn-block mb-3" tabindex="-1" role="button"
aria-disabled="true">Log in
</a>
</div>
<div class="help3">
<h4 class="mt-2"><span class="icon oi oi-person"></span>You're already a ABC customer?</h4>
<a href="#" class="btn btn-light btn-sm btn-block" tabindex="-1" role="button" aria-disabled="true">Log
in to ABC Internet
</a>
</div>
</div>
<script>
</script>
</body>