1

ブートストラップ (バージョン 2) のモーダルを使用しています。デフォルトのサイズは望ましくないため、次の CSS を適用しました。

#myModal{
    width: 80%;
    margin-left: -40%;
}

しかし問題は、モーダルのコンテンツがモバイル デバイスと互換性がなくなったことです。つまり、水平スクロール バーがなくなり、テキストがコンテンツからはみ出します。ただし、前述の CSS を適用しない場合、モバイル デバイスと互換性があります。しかし問題は、デスクトップでの私の目的には幅が小さすぎることです。

4

2 に答える 2

1

Bootstrap は、メディア クエリを使用することがすべてです。デスクトップでの表示だけに関心があるので、それらの使用も検討する必要があります。最小幅の値をいじることができますが、iPad では通常 789px です。

@media (min-width: 789px) {
          width:80%;
          margin-left: -40%;
       }
于 2014-02-10T18:19:51.697 に答える
0

あなたのサイトに深く入り込んでおらず、ブートストラップ 2 を使用している場合は、すべてのクラスを流動的なレイアウトに変換することをお勧めします。これは、前述のメディア クエリを使用するときに役立ちます。

開発の初期段階にいる場合は、レスポンシブ動作に対処するための装備が整っているため、ブートストラップ 3 に切り替えることをお勧めします。

いずれにせよ、ブートストラップ 2 には、作業を開始するための優れたメディア クエリのセットを含む Respond.css ファイルがあります。

/* Large desktop */
@media (min-width: 1200px) { ... }

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }

/* Landscape phones and down */
@media (max-width: 480px) { ... }

私のアドバイスは、ブラウザとモバイルデバイスのサイズを変更して、サイトがうまくまとまっていることを確認することです.

于 2014-02-10T18:26:43.877 に答える