3

私のアプリケーションは、すべて異なる幅の多くのモーダルを備えています。次のような操作を行うことで、モーダルインラインの幅を設定できることを理解しています。

幅:400pxマージン-左:-200px;

これはうまく機能しますが、ウィンドウを圧縮すると画面のモーダルが50%キックされるため、これらの小さな解像度ではモーダルレンダリングの半分が役に立たないことがわかりません。iPadの解像度については、これが発生することがわかります。

ここで問題に移ります。メインのbootstrap.cssファイルでモーダルの幅を設定した場合、その1つの幅だけが完全に機能します。したがって、幅を400に設定し、margin-left -200に設定すると、すべてのモーダルがこの幅で機能します。しかし、先に進んでモーダルでインラインCSSを実行すると、たとえば次のようになります。

幅:900pxマージン-左:-450px

上記のように、より低い解像度で壊れます。

私は何が間違っているのですか?Twitter Bootstrapは、すべての解像度で1つのモーダル幅を機能させる機能しか提供していませんか?

スクリーンショットを含めますが、StackOverflowの管理者は、皆さんを助けるためにこれらを投稿することを許可していないようです。

これは、幅をインライン化するために低解像度で機能しないモーダルの1つの例です。

<div id="add-edit-project-modal" class="modal hide fade" style="width: 320px; margin-left: -160px;">
  <div class="add-edit-project-modal-header modal-header">
    <a class="close" data-dismiss="modal">×</a>
    <h4 class="modal-title">New Project</h4>
 </div>
 <div class="add-edit-project-modal-body modal-body">
    <form action="" id="add_project">
    <label>Name</label>
  </div>
  <div class="add-edit-project-modal-footer modal-footer">
    <input type="submit" id="submitButton" class="btn submit" value="Create">
    </form>
  </div>
</div>

iPadの解像度とほぼ同じで、モーダルの50%が画面の左側にあります。

4

1 に答える 1