📜  如何使用 bootstrap 4 在 box-inner div 中设置全高?

📅  最后修改于: 2021-08-31 07:23:51             🧑  作者: Mango

d-flex是 Bootstrap 4 中的一个内置类,可用于将整个高度设置为 div。我们将用下面的工作代码示例来说明它。

句法:

...

下面的代码在水平排列中创建三个 div,但问题是类box-inner的内部 div 的高度在所有 div 中并不相同,并且取决于 div 中的文本。我们希望所有 div 的高度都相同,并且等于具有最长文本的 div 的高度。

  • 程序:
    
    
      
    
        
        
    
      
    
        

    GeeksforGeeks

        A Computer Science Portal for Geeks            
            
                
                    
                        

                            This is my first div.                     

                    
                
                
                    
                        

                            This is my second div with a                         very very long text. Text in                         this div is longer than both                         other divs.                     

                    
                
                
                    
                        

                            This is my third div.                     

                    
                
            
        
      
  • 输出:

解决方案:我们将使用d-flex类来增加所有 div 的高度,同时我们将添加宽度:100%;这样所有 div 的宽度都是可用区域的最大值。

  • 程序:
    
    
      
    
        
      
        
    
      
    
        
            
                
                    
                        

                            This is my first div.                     

                    
                
                
                    
                        

                            This is my second div with a very                         very long text. Text in this div                         is longer than both other divs.                     

                    
                
                
                    
                        

                            This is my third div.                     

                    
                
            
        
         
  • 输出: