如何在HTML中使用Bootstrap使用列方式Verticle网格

Question

我一直在尝试使用 HTML中的Bootstrap 显示以下附加图像垂直列智能网格视图。可以给我一些关于如何实现这一点的想法。

现在我通常在w3school上显示网格系统的行方式列网格。但是这对移动视图没有响应。所以我需要在垂直

上显示

提前谢谢!!

Answer 1

我将这些分割成垂直列。在每列中，我插入行类以进一步将行分成列。

h2,h1 {
    background-color: #ffffff;
  }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<section class="text-center clearfix">
  
  <!-- Divided sections into column-->
  <div class="col-4 float-left" style="background-color:red">
    <h1>col-1</h1>
    
    <!-- Each column contains row-->
    <div class="row" style="background-color: #ff3333">
    
      <!-- You can further divide vertical column-->
      <div class="col-6"> 
        <h2>item-1(a)</h2> 
      </div>
      <div class="col-6"> 
        <h2>item-1(b)</h2> 
      </div>
    </div>
    <div class="row" style="background-color: #ff4d4d">
      <h2>item-2</h2>
    </div>
  </div>
  
  
  <div class="col-4 float-left" style="background-color:green">
    <h1>col-2</h1>
    <div class="row" style="background-color:#1aff66">
      <h2>item-1</h2>
    </div>
  </div>
  
  
  <div class="col-4 float-left" style="background-color:blue">
    <h1>col-3</h1>
    <div class="row" style="background-color: #0069cc">
      <h2>item-1</h2>
    </div>
    <div class="row" style="background-color: #4d94ff">
      <h2>item-2</h2>
    </div>
    <div class="row" style="background-color: #b3d1ff">
      <h2>item-3</h2>
    </div>
    <div class="row" style="background-color: #cce6ff">
      <h2>item-4</h2>
    </div>
  </div>
  
</section>


<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

Answer 2

对于垂直列式网格视图，您可以使用

$('.grid').masonry({
  // set itemSelector so .grid-sizer is not used in layout
  itemSelector: '.grid-item',
  // use element for option
  columnWidth: '.grid-sizer',
  percentPosition: true
})

.grid-sizer,
.grid-item { width: 20%; }
/* 2 columns */
.grid-item--width2 { width: 40%; }

<div class="grid">
  <!-- width of .grid-sizer used for columnWidth -->
  <div class="grid-sizer"></div>
  <div class="grid-item"></div>
  <div class="grid-item grid-item--width2"></div>
  ...
</div>

Masonry是一个JavaScript网格布局库。它的工作原理是根据可用的垂直空间将元素放置在最佳位置，有点像石膏在墙上贴合石头。

您可以使用此链接作为参考 https://masonry.desandro.com/

Answer 3

您可以使用bootstrap 4 flex实用程序

https://getbootstrap.com/docs/4.0/utilities/flex/