0

ブラウザーのサイズ変更または小型デバイスで 3>>2>>1 列を表示するようにブートストラップをカスタマイズしています。Safari を除くすべてのブラウザーで動作する css3 メディア クエリを使用しました。以下は私が使用したcssです。常に最初のメディア クエリを使用しているため、Safari で問題が発生しています。Mac と Windows Safari の両方をテストしましたが、同じ問題に直面しました。助けてください。

ビューポート HTML ヘッド セクションに追加

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />

使用される CSS3:

/*Apply different margin based on media size*/
@media (min-width:1632)
{
.two-column .row-fluid [class*="span"]:nth-child(3n+1)
    {
        margin-left:100px;
    }
}

@media (min-width: 981px) and (max-width: 1631px)
{
    .two-column .row-fluid [class*="span"]:nth-child(2n+1)
    {
     margin-left:100px;
    }

}

@media (min-width: 982px) and (max-width: 1155px)
{
    .two-column .row-fluid [class*="span"]:nth-child(2n+1)
    {
     margin-left:10px;
    }

}

@media (min-width: 545px) and (max-width: 981px)
{
    .two-column .row-fluid .span6  
    {
     margin-left:5%;
    }

}


@media (max-width: 546px)
{
    .two-column .row-fluid .span6  
    {
     margin-left:5px;
    }
}
4

2 に答える 2

0

Bootstrap は、ブラウザー サポート ドキュメントに記載されているように、Windows Safari を明示的にサポートしていません。

于 2013-10-22T06:27:50.847 に答える