列の中央の縦方向の整列（ブートストラップ）

Question

行内の列に対して中間整列/垂直整列を実行しようとしています。だから私のコードです：

ブートストラップの使用。

FIDDLE

私はこの

#row-contact { 
display: flex; 
align-items: center; } 

のようなものを使用しようとしていた。しかしそれは、モバイル上で正しく動作していないように見えるだ - の列がスタックされていません。

誰かが私を助け、自分のコードに変更する必要があることを知っているかもしれません。

モバイルでも動作するはずです。あなた未遂コードに加えて

Answer 1

：あなたがする必要がどのような

#row-contact { 
    display: flex; 
    align-items: center; 
} 

は（デフォルトでは幅の100％を占める）block要素に行を回す小型デバイス用のメディアクエリを追加することです。私はここ600PXの幅で行っていますが、行が互いの上にスタックしたい幅に合わせて調整すること自由に感じてきました：

@media screen and (max-width: 600px) { 
    #row-contact { 
    display: block; 
    } 
} 

私はこのhereを展示フィドルを作成しました。

希望すると便利です。 :)

Answer 2

モバイル版デスクトップ版のようですか？もしそうなら、あなたは忘れている可能性があります：あなたのHTMLヘッダに

<meta name="viewport" content="width=device-width, initial-scale=1.0">

を。