2017-06-09 5 views
1

私はブートストラップ4(アルファ6)グリッドシステムを使用しようとしていました。私ははい、列が何を希望に逆転しているiPhoneのブートストラップグリッドシステム

<body> 
    <div class="container-fluid"> 
    <div class="row"> 
    <div style="border-style: solid" class="col-1 col-sm-2 col-md-3 col-lg-4 col-xl-6">1</div> 
    <div style="border-style: solid" class="col-1 col-sm-2 col-md-3 col-lg-4 col-xl-6">2</div> 
    <div style="border-style: solid" class="col-1 col-sm-2 col-md-3 col-lg-4 col-xl-6">3</div> 
    <div style="border-style: solid" class="col-1 col-sm-2 col-md-3 col-lg-4 col-xl-6">4</div> 
    <div style="border-style: solid" class="col-1 col-sm-2 col-md-3 col-lg-4 col-xl-6">5</div> 
    <div style="border-style: solid" class="col-1 col-sm-2 col-md-3 col-lg-4 col-xl-6">6</div> 
    <div style="border-style: solid" class="col-1 col-sm-2 col-md-3 col-lg-4 col-xl-6">7</div> 
    <div style="border-style: solid" class="col-1 col-sm-2 col-md-3 col-lg-4 col-xl-6">8</div> 
    <div style="border-style: solid" class="col-1 col-sm-2 col-md-3 col-lg-4 col-xl-6">9</div> 
    <div style="border-style: solid" class="col-1 col-sm-2 col-md-3 col-lg-4 col-xl-6">10</div> 
    <div style="border-style: solid" class="col-1 col-sm-2 col-md-3 col-lg-4 col-xl-6">11</div> 
    <div style="border-style: solid" class="col-1 col-sm-2 col-md-3 col-lg-4 col-xl-6">12</div> 
    </div> 
    </div> 
</body> 

「maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css」を使用して、次のテストに付属しています通常は期待していましたが、ブレークポイントが適用されているのを見やすくしました。 PCブラウザでは、画面のサイズを変更するとブレークポイントが機能します。狭い画面に1行、全幅にすると6行になります。

私のiPhone 5(640×1136)では回転に応じてcol-sm-2とcol-lg-4が適用されることが予想されました。代わりに私が見るのはcol-md-3の設定だけです。 Android(Amazon Fire)でも同じことが起こります。

要約すると、iphone5でブートストラップグリッドを使用すると、回転に関係なくすべてのメディアが表示されます。私は何か間違っているのですか、電話の標準的なビューポートの "中"ですか?

+1

ヘッドは、メタビューポートタグが含まれていますか? https://stackoverflow.com/a/19158781/171456 – ZimSystem

+0

いいえ! (頭に頭を打つ)それはそれを修正した。あなたのボーナスポイントが必要な場合はそれを答えてください。私が最初からプロジェクトを開始して以来、長いこと、私はhttps://v4-alpha.getbootstrap.com/getting-started/introduction/#starter-templateについて忘れていました – MortimerCat

答えて

2

としては、モバイルデバイス上で適切にページを拡大縮小するメタビューポートを追加し、このother questionで説明:

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

関連する問題