Question

我正在使用一个bootstrap 3容器，里面有一个col-sm-4和col-sm-offset-4，用于将窗体定位在里面。我希望使用flexbox将表单垂直居中，它可以在Chrome＆amp; Safari，但是使用mozilla，它无法正常工作。

#login {
height: 100vh;
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;

}

我的容器

我的HTML代码：

<div class="container" id="login">
    <div class="row">
        <div class="col-sm-4 col-sm-offset-4 centered">
            <div class="well">
                <form action="login.php" autocomplete="off" id="Login_Form" method="post" name="Login_Form">
                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-addon"><i aria-hidden="true" class="fa fa-user fa-fw"></i></span> <input class="form-control" name="Username" placeholder="Nutzername">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-addon"><i aria-hidden="true" class="fa fa-shield fa-fw"></i></span> <input class="form-control" name="Password" placeholder="Passwort" type="password">
                        </div>
                    </div>
                    <div class="form-group">
                        <button class="btn btn-primary full-width-button" name="Submit" value="Login">Anmelden</button>
                    </div>
                    <table class="errormessage_table">
                        <?php if(isset($msg)){?>
                        <tr>
                            <td class="errormessage"><?php echo $msg;?></td>
                        </tr><?php } ?>
                    </table>
                </form>
            </div>
        </div>
    </div>
</div>

喜欢......容器很小，在safari中，容器要大得多，而且不会被切断

Safari & Chrome Mozilla Firefox

希望有人可以帮助我:)。

Answer 1

要达到预期效果，请删除display：flex

#login {
  height: 100vh;
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

http://codepen.io/nagasai/pen/zBjkWw

Mozilla flexbox无法使用bootstrap行

1 个答案: