Bootstrap 4 栅格系统垂直布局

关键词：bootstrap 4，vertical alignment，grid systerm

问题：按照Bootstrap 4 官方文档的说明。应用.align-items-center可以使元素垂直居中：

Bootstrap 4 垂直居中示例.png

官方示例代码：

  

    

      One of three columns
    
    

      One of three columns
    
    

      One of three columns
    
  
  

    

      One of three columns
    
    

      One of three columns
    
    

      One of three columns
    
  
  

    

      One of three columns
    
    

      One of three columns
    
    

      One of three columns
    
  

将官方示例代码复制粘贴到新文档，在浏览器中打开：

官方示例代码实际的效果.png

垂直的居中的效果并没有实现。

解决办法：给要垂直居中的元素所在的row加一个高度，

  
    
    
    

    
    

    

    
  
  

    

    

      

        One of three columns
      
      

        One of three columns
      
      

        One of three columns
      
    
    

      

        One of three columns
      
      

        One of three columns
      
      

        One of three columns
      
    
    

      

        One of three columns
      
      

        One of three columns
      
      

        One of three columns
      
    
  


    
    
    
    
    
  

总结：
将垂直居中的元素包裹在.row中，再用.container包裹，并给.row设置一个高度。