我如何垂直对齐中心表格

时间:2019-12-06 20:09:50

标签: forms bootstrap-4 vertical-alignment

在我问我首先要说我尝试垂直方法对齐之前,它没有用,所以我必须发布我的这个问题。很抱歉,这可能是一个琐碎的问题,但我一直在苦苦挣扎。

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3">
      One of three columns
    </div>
    <div class="col-sm-6">
        <section>
        <h1>Signup</h1>
            <form action="includes/signup.inc.php" method="post">
                <input type="text" name="uid" placeholder="Username">
                <input type="text" name="mail" placeholder="E-mail">
                <input type="password" name="pwd" placeholder="Password">
                <input type="password" name="pwd-repeat" placeholder="Repeat password">
                <button class="btn btn-default" type="submit" name="signup-submit">Signup</button>
            </form>
        </section>
    </div>
    <div class="col-sm-3">
      One of three columns
    </div>
  </div>
</div>

1 个答案:

答案 0 :(得分:1)

在每个输入元素中添加form-control类。

<input class="form-control" type="text" name="uid" placeholder="Username">
<input class="form-control" type="text" name="mail" placeholder="E-mail">
<input class="form-control" type="password" name="pwd" placeholder="Password">
<input class="form-control" type="password" name="pwd-repeat" placeholder="Repeat password">

enter image description here