在tablet屏幕上应用引导网格

Question

我正在做一个小的web项目，我想在平板电脑屏幕上使用bootstrap类显示三个导航图像。我的第一个导航图像需要首先以全宽显示，其他两个导航图像并排显示在第一个导航图像的下方。它在中大屏幕上运行良好。我需要一些帮助。下面是我的代码和要实现的结果的图像。

Image on medium and Large screen. Image on Tablet 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>

确保在第二行中使用col md-6而不是col md-2