タブレット画面にブートストラップグリッドを適用する

Question

私は小さなウェブプロジェクトに取り組んでおり、タブレット画面にブートストラップクラスを使って3つのナビゲーション画像を表示したいと思います。私の最初のナビゲーション画像は最初に全幅で表示する必要があり、他の2つのナビゲーション画像は最初のナビゲーション画像を横に並べて表示します。それは中および大画面でうまく動作します。助けが要る。以下は私のコードと達成される結果のイメージです。

Image on medium and Large screen.​​。それはスマートフォンの画面に積み重ねる必要があります。

<div class="row"> 
    <nav class="col-md-8 col-sm-12" id="left"> 
     <a href="#"><img src="" alt=""></a> 
    </nav> 
    <nav class="col-md-4 col-sm-12"> 
    <div class="row"> 
     <nav class="col-md-2 col-sm-6" id="side1"> 
      <a href="#"><img src="" alt=""></a> 
     </nav> 
     <nav class="col-md-2 col-sm-6" id="side2"> 
      <a href="#"><img src="" alt=""></a> 
     </nav>  
    </div> 
    </nav> 
    </div> 

Answer 1

次のことを試してみてください。

<div class="container-fluid"> 
    <div class="row"> 
    <nav class="col-md-8 col-sm-12" id="left" style="background-color:red; height:100px;">   
    </nav> 
    <nav class="col-md-4 col-sm-12"> 
     <div class="row"> 
     <nav class="col-md-6 col-sm-6" id="side1" style="background-color:pink; height:100px;"> 
     </nav> 
     <nav class="col-md-6 col-sm-6" id="side2" style="background-color:tan; height:100px;">   
     </nav>  
     </div> 
    </nav> 
    </div>  
</div> 

必ず2行目の代わりにCOL-MD-2のCOL-MD-6を使用してください