2016-07-23 6 views
0

私はブートストラップ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 誰かが私を助けることができます:)

+0

を曲げ、あなたのHTMLコード –

+0

を共有してください私はhtmlコードを追加しました。返信してくれてありがとうございました:) –

+0

親のdiv表示がフレックスなので、動作を変更するので、行内にcol-xs-12を追加するだけです。 – Noni

答えて

0

を表示を削除し、あなたの期待される結果を達成するために

希望:

#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

+0

これまでのところ、すべてのブラウザで動作していますが、少なくともそれ以上切り捨てられていません。そして、フォーム全体を現在どのように中心に置くことができますか? SafariとChromeはすでに中心に置かれていますが、Firefoxはうまく見えますが、一番上に貼り付けられます。何か案は?ありがとう:) –

+0

更新codepen - http://codepen.io/nagasai/pen/zBjkWw ..一度それを確認してください –

+0

@ FI_124これはあなたのために働くことを願って:) –

関連する問題