Bootstrap 3：如何在网格内正确使用表单组（表单）？

Question

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

我对 bootstrap 非常陌生，并且一直在尝试在我的注册页面中正确对齐表单。我不太清楚在 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 上的方式）。我什至不确定引导网格是否是正确的方法！

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

谢谢。

瑞奇

Answer 1

这将是第一个代码： 尝试始终在容器内声明带有列的行。 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;
  }

谢谢。