Question

我想要使用引导程序制作2 x 2响应式图像网格视图。

<div class="col-md-4">
  <div class="row">
     <div class ="col-md-2">
        <img src="download.png">
     </div>
     <div class ="col-md-2">
        <img src="download.png">
     </div>
  </div>
  <div class="row">
     <div class ="col-md-2">
        <img src="download.png">
     </div>
     <div class ="col-md-2">
        <img src="download.png">
     </div>
  </div>
</div>

Answer 1

希望这会有所帮助

.row{margin-bottom: 10px;}
.row img{margin:10px;max-width: 100%;}

<link href="https://getbootstrap.com/docs/4.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="container">
  <div class="row">
    <div class="col-md-6 col-sm-6">
      <img src="http://lorempixel.com/600/600/" />
    </div>
    <div class="col-md-6 col-sm-6">
      <img src="http://lorempixel.com/600/600/" />
    </div>
    </div>
    <div class="row">
    <div class="col-md-6 col-sm-6">
      <img src="http://lorempixel.com/600/600/" />
    </div>
    <div class="col-md-6 col-sm-6">
      <img src="http://lorempixel.com/600/600/" />
    </div>
    </div>
  </div>

如何在HTML引导程序中创建响应式两行网格图像视图（2 x 2）？

1 个答案: