如何在Bootstrap 4中将项目放置在彼此灵活的盒子下面？

引导程序4中的Flexbox：从引导程序3到引导程序4，发生了惊人的变化，引导程序4可以利用Flexbox来处理内容的布局。 FlexBox布局模块使设计灵活的响应式布局结构变得更加容易。

方法：使用Directions实用程序将flex项的方向放置在flex容器中。在大多数情况下，您将能够排除水平类，因为浏览器默认为一行。无论如何，您都会遇到需要明确设置此自尊的情况(例如响应式布局)。

以下示例表示在Flex-Box中将项目彼此放在下面的不同方式。

示例1：使用。 flex-column类将项目放在彼此下面。

HTML

  

  
  
  
      
  
  

  

  
    
GeeksforGeeks
    

      
Content 1
      
Content 2
      
Content 3
    
  

  

输出：

示例2：您还可以使用.flex-column-reverse类将项目以相反的顺序放置在彼此下面。以相反的顺序显示弹性框。

的HTML

  

  
  
  
  
  
  
  
  
  

  

  
    
GeeksforGeeks
    

      
Content 1
      
Content 2
      
Content 3
    
  

  

输出：

示例3：使用flex-direction：column;和align-items：center;您可以将物品放在彼此下面的中间。因此，如下所示，我们可以在bootstrap 4中使用flexbox将图标或图像放置在彼此下方。

的HTML

  

  
  
  
  
  
  
  
  
  
    
  flexbox | bootstrap4
    
  
    .my_content {
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
    }
  
    .my_options {
      border: 1px solid green;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  

  

  
    GeeksforGeeks
  
  
    
      
       fa-hand-o-down
    
    
      
       fa-hand-o-left
    
    
      
       fa-hand-o-right
    
    
      
       fa-hand-o-up
    
  

  

输出：