Bootstrap GRID/Layouts
Bootstrap GRID/Layouts
我是 bootstrap 的新手，我对某些布局设置有些吃力。我想在右侧创建一个 tooltip/box 形式的居中表单，它与表单框的顶部内联。下面是我当前的表格，我将附上一张我正在努力实现的照片。我已经尝试了很长一段时间，但我最接近的是将它置于页面中间或现有表单下方。
我想要实现的目标：（橙色框）
当前 html:
<html lang="en">
<head>
<title>Whosebug</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>
提前致谢！
看看设计，你也需要一样的。因为，我做的和你附上的照片一样。它在所有视图中都向我显示相同内容。
他们有些错误，我在下面突出显示。请下次阅读此内容。
First, You have to add Bootstrap CDN in HTML File to use bootstrap classes.
Second, Don't forget to close the tags. Their is no closing tag in many places that's why its design was not showing properly.
Try to write code in format so that you know which closing tag is
missing.
- Third, Their is no need to take .h-100 class in body and every div tag or container it automatically. if anywhere you want to less height
then you can use CSS for less height.
<html lang="en">
<head>
<title>Whosebug</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>
我是 bootstrap 的新手，我对某些布局设置有些吃力。我想在右侧创建一个 tooltip/box 形式的居中表单，它与表单框的顶部内联。下面是我当前的表格，我将附上一张我正在努力实现的照片。我已经尝试了很长一段时间，但我最接近的是将它置于页面中间或现有表单下方。
我想要实现的目标：（橙色框）
当前 html:
<html lang="en">
<head>
<title>Whosebug</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>
提前致谢！
看看设计，你也需要一样的。因为，我做的和你附上的照片一样。它在所有视图中都向我显示相同内容。
他们有些错误，我在下面突出显示。请下次阅读此内容。
First, You have to add Bootstrap CDN in HTML File to use bootstrap classes.
Second, Don't forget to close the tags. Their is no closing tag in many places that's why its design was not showing properly.
Try to write code in format so that you know which closing tag is missing.
- Third, Their is no need to take .h-100 class in body and every div tag or container it automatically. if anywhere you want to less height then you can use CSS for less height.
<html lang="en">
<head>
<title>Whosebug</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>