php - Bootstrap 3 : How to properly use a form-groups (a form) inside a grid?

Question

为了大学评估，我的任务是创建一个非常简单的网站，其概念是使用基本的 PHP 和 SQL 功能的“Facebook Lite”。

我是 Bootstrap 的新手，一直在尝试在我的注册页面中正确对齐表单。我不太清楚在 3-6-3 Bootstrap 网格中放置表单的正确方法，网页一直错误地按照我想要的方式呈现表单。

我正在使用的页面是一个 php 文件 (register.php)，到目前为止，我已经弄清楚了如何成功地创建一个工作的 Bootstrap 水平表单，当窗口变小等时，该表单将折叠为垂直。

但是我不能让它完全居中，表单一直显示在视口(viewport)的右侧，并且输入框在移动设备上看起来很糟糕。

如前所述，我对 bootstrap 非常陌生，所以如果我以完全错误的方式进行此操作，请原谅我。

为了您的方便，我准备了 2 页； 第 1 页 (register.php) - 我认为这是制作简单的 Bootstrap 表单的正确方法，但是它没有居中并且输入框在移动设备上变得很小(我只是按照 Bootstrap 网站的说明进行操作)

http://titan.csit.rmit.edu.au/~s3605062/register.php

第2页(register2.php) 我试图将我新创建的表单放在 3-6-3 的 Bootstrap 网格中(假设将表单居中)。我使用了 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 上的方式)。我什至不确定 Bootstrap 网格是否是执行此操作的正确方法!

非常感谢任何帮助，对于我只是想清楚地解释自己的冗长帖子，我深表歉意。

谢谢。

瑞奇

Answer 1

这将是第一个代码: 尝试始终在容器内声明带有列的行。 d-flex 和 justify-content-center 将有助于集中表单。它是 Bootstrap 默认类。

<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;
  }

谢谢。