php - Bootstrap 3：如何在网格内正确使用表单组（表单）？
问题描述
对于大学评估，我的任务是创建一个非常简单的网站，其中包含使用基本 PHP 和 SQL 功能的“Facebook Lite”概念。
我对引导程序非常陌生，并且一直在尝试在我的注册页面中正确对齐表单。我不太清楚将表单放置在 3-6-3 引导网格中的正确方法，网页只是不断地按照我的意愿不正确地呈现表单。
我正在使用的页面是一个 php 文件（register.php），到目前为止，我已经研究出如何成功创建一个工作引导水平表单，当窗口缩小等时它将折叠到垂直状态。
但是我不能让它居中，表单一直显示在视口的右侧，输入框在移动设备上看起来很糟糕。
如前所述，我对引导程序非常陌生，所以如果我以完全错误的方式处理此问题，请原谅我。
为了您的方便，我准备了 2 页；第 1 页 (register.php) - 我认为这是制作简单引导表单的正确方法，但它没有居中，并且输入框在移动设备上变得很小（我只是按照引导网站的说明进行操作）
http://titan.csit.rmit.edu.au/~s3605062/register.php
第 2 页 (register2.php) 我尝试将我新创建的表单放置在 3-6-3 的引导网格中（据说是为了使表单居中）。我使用了来自 W3Schools 的示例演示，因此我可以尝试了解它是如何工作的，但正如您所看到的那样，它无法正常工作......
http://titan.csit.rmit.edu.au/~s3605062/register2.php
register.php 代码：
<div class="container">
<form class="form-horizontal" method="post" action="/register_new.php">
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="e.g. jsmith@example.com" name="email">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">Password:</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="pwd" placeholder="Create a password" name="pwd">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="fullname">Full Name:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="fullname" placeholder="e.g. John Smith" name="fullname">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="screenname">Screen Name:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="screenname" placeholder="e.g. John S" name="screenname">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="dateofbirth">Date of Birth:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="dateofbirth" placeholder="MM/DD/YYYY" name="dateofbirth"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="gender">Gender:</label>
<div class="col-sm-10">
<select class="form-control" id="gender" name="gender">
<option value="" selected disabled>Please select...</option>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="nonbinary">Non-Binary</option>
<option value="notsharing">Prefer not to answer</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="gender">Status:</label>
<div class="col-sm-10">
<select class="form-control" id="status" name="status">
<option value="" selected disabled>Please select...</option>
<option value="single">Single</option>
<option value="relationship">In a relationship</option>
<option value="complicated">Its complicated</option>
<option value="partnership">In a domestic partnership</option>
<option value="married">Married</option>
<option value="widowed">Widowed</option>
<option value="notsharing">Prefer not to answer</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="location">Location:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="location" placeholder="e.g. Melbourne, Australia" name="location">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="registerbtn" class="btn btn-default">Sign Up</button>
</div>
</div>
</form>
</div>
register2.php的代码：
<div class="container">
<div class="row">
<div class="col-sm-3" style="background-color:lavender;">.col-sm-3</div>
<div class="col-sm-6" style="background-color:lavenderblush;">
<form class="form-horizontal" method="post" action="/register_new.php">
<div class="form-group">
<label class="control-label col-sm-3" for="email">Email:</label>
<div class="col-sm-3">
<input type="email" class="form-control" id="email" placeholder="e.g. jsmith@example.com" name="email">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-6" for="pwd">Password:</label>
<div class="col-sm-6">
<input type="password" class="form-control" id="pwd" placeholder="Create a password" name="pwd">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-6" for="fullname">Full Name:</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="fullname" placeholder="e.g. John Smith" name="fullname">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-6" for="screenname">Screen Name:</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="screenname" placeholder="e.g. John S" name="screenname">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-6" for="dateofbirth">Date of Birth:</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="dateofbirth" placeholder="MM/DD/YYYY" name="dateofbirth"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-6" for="gender">Gender:</label>
<div class="col-sm-6">
<select class="form-control" id="gender" name="gender">
<option value="" selected disabled>Please select...</option>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="nonbinary">Non-Binary</option>
<option value="notsharing">Prefer not to answer</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-6" for="gender">Status:</label>
<div class="col-sm-6">
<select class="form-control" id="status" name="status">
<option value="" selected disabled>Please select...</option>
<option value="single">Single</option>
<option value="relationship">In a relationship</option>
<option value="complicated">Its complicated</option>
<option value="partnership">In a domestic partnership</option>
<option value="married">Married</option>
<option value="widowed">Widowed</option>
<option value="notsharing">Prefer not to answer</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-6" for="location">Location:</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="location" placeholder="e.g. Melbourne, Australia" name="location">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-6 col-sm-6">
<button type="registerbtn" class="btn btn-default">Sign Up</button>
</div>
</div>
</form>
</div>
<div class="col-sm-3" style="background-color:lavender;">.col-sm-3</div>
</div>
</div>
作为最终结果，我希望它像 register2.php 一样居中，但表单标签和输入正确呈现（类似于它们在 register.php 上的方式）。我什至不确定引导网格是否是正确的方法！
非常感谢您的任何帮助，感谢您，对于我只想清楚地解释自己的冗长帖子，我深表歉意。
谢谢你。
瑞奇
解决方案
这将是第一个代码：尝试始终在容器内声明带有列的行。d-flex 和 justify-content-center 将有助于集中表单。它是引导程序默认类。
<div class="container">
<div class="row d-flex justify-content-center">
<div class="col-md-9">
<form class="form-horizontal" method="post" action="/register_new.php">
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="e.g. jsmith@example.com" name="email">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">Password:</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="pwd" placeholder="Create a password" name="pwd">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="fullname">Full Name:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="fullname" placeholder="e.g. John Smith" name="fullname">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="screenname">Screen Name:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="screenname" placeholder="e.g. John S" name="screenname">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="dateofbirth">Date of Birth:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="dateofbirth" placeholder="MM/DD/YYYY" name="dateofbirth"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="gender">Gender:</label>
<div class="col-sm-10">
<select class="form-control" id="gender" name="gender">
<option value="" selected disabled>Please select...</option>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="nonbinary">Non-Binary</option>
<option value="notsharing">Prefer not to answer</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="gender">Status:</label>
<div class="col-sm-10">
<select class="form-control" id="status" name="status">
<option value="" selected disabled>Please select...</option>
<option value="single">Single</option>
<option value="relationship">In a relationship</option>
<option value="complicated">Its complicated</option>
<option value="partnership">In a domestic partnership</option>
<option value="married">Married</option>
<option value="widowed">Widowed</option>
<option value="notsharing">Prefer not to answer</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="location">Location:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="location" placeholder="e.g. Melbourne, Australia" name="location">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="registerbtn" class="btn btn-default">Sign Up</button>
</div>
</div>
</form>
</div>
</div>
</div>
对于第二个表单 default.css，您使用的是表单填充，这就是为什么您在左侧有一个空格。
form {
margin-top: 10px;
padding-left: 370px;
}
谢谢。
推荐阅读
- javascript - 我应该对这些使用 else-if 语句吗？
- scala - 将日期从一种格式解析为另一种格式
- python-2.7 - 在 div 类中获取MYTEXT之间的文本
- azure - Azure dns 将 www 转发到裸 no-www
- eclipse - STS 在一个干净的新 Maven 项目中显示错误
- android-studio - 从 Android Studio 3 到带有 Android 9 的三星的 APK 安装卡住了
- java - Java锁的条件实现
- python-3.x - 在 OpenCV Python 中屏蔽特定区域
- javascript - 随机出现哪个元素
- r - 在两个变量列表上循环迭代，以实现 R 中的多元回归