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

📅  最后修改于: 2021-05-25 11:11:48             🧑  作者: Mango

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

句法:

...

下面的代码以水平排列创建三个div,但问题是在所有div中,box-inner类的inner-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的高度,并随之添加width: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.                     

                    
                
            
        
         
  • 输出: