ブーツラップの縦方向と横方向の両方の中心モダル

私が実際に垂直モーダルを中心としていること、this solutionを試してみましたが、私は（800ピクセルで）template自分自身でそれをしようとしたとき、その水平方向の中心を失った：

をどのように私はこれを達成できます垂直と水平のモーダルを中心に自分自身でtemplate？

注からtemplateの幅と高さは、動的そう溶液は任意の幅と高さとのために適切であるべきです。

2017-06-07 URL87

何モーダルの絶対位置についてはどうですか？ –

フレックスCSSを使用して取得することができます。 – LKG

https://www.youtube.com/watch?v=kMCJjnxn8IMビデオは –

モーダルは、その中心を失った理由は、このCSSルールによるものです：

@media (min-width: 768px) { 
    .modal-dialog { 
     width: 600px; 
     margin: 30px auto; 
    } 
}

テンプレートは、800ピクセルの幅を持っているので、あなたが.modal-dialogを設定した場合、それはそのコンテナ（.modal-dialogのdiv）

をオーバーフロー幅：自動で修正されます。

2017-06-07 09:23:36

私はちょうど

.modal .modal-dialog { 
max-width: 800px; 
width: 100%; 
}

これで.modal-dialogを上書きしました。それは固定されているので max-width:800px;

小さな画面では、私はマージンの自動を追加したので落ちません。

@media (max-width: 767px){ 
    .modal .modal-dialog{ 
    margin:10px auto; 
    } 
}

2017-06-07 09:58:09 locateganesh

答えて