私はブートストラップ3コンテナを使用しています。内部にフォームをセンタリングするcol-sm-4とcol-sm-offset-4があります。 フレックスボックスを使ってフォームを縦方向に集中させたいのですが、それはChromeの& Safariで動作していますが、mozillaでは機能しません。Mozilla flexboxがブートストラップ行で動作しない
<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>
like..theコンテナはサファリにコンテナがカットたくさん大きく、ではないので、小さいです:
上記の私のコンテナ私のhtmlコード
#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;
}
オフ
Safari & Chrome 誰かが私を助けることができます:)
を曲げ、あなたのHTMLコード –
を共有してください私はhtmlコードを追加しました。返信してくれてありがとうございました:) –
親のdiv表示がフレックスなので、動作を変更するので、行内にcol-xs-12を追加するだけです。 – Noni