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

在平板电脑屏幕上应用bootstrap网格

1 个答案: