代码之家 › 专栏 › 技术社区 › Nitin Karande

如何在HTML中使用引导程序使用逐列垂直网格

bootstrap-4 grid html

Nitin Karande · 技术社区 · 6 年前

我一直在尝试显示下面的附加图像 垂直柱状栅格视图 使用 HTML中的引导 。可以给我一些如何实现这一目标的想法。

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

提前谢谢!!

3 回复 | 直到 6 年前

Tony Stark 6 年前

我将该部分划分为垂直列。在每个列中,我插入了row类,以将行进一步划分为列。

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>

PHP Geek 6 年前

对于垂直柱状栅格视图,可以使用

$('.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/

Vineeta Mehta 6 年前

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

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