📌  相关文章
📜  如何在Bootstrap的侧边栏中将两列一个放在另一个下面？

📅  最后修改于: 2021-05-25 10:54:20             🧑  作者: Mango

Bootstrap由Mark Otto和Jacob Thornton开发，是一个免费的开源响应式CSS框架，用于前端Web开发。尽管Bootstrap 5 Alpha是2020年6月16日发布的最新版本的Bootstrap，但它仍处于开发阶段，因此大多数开发人员仍在继续使用Bootstrap4。Bootstrap是一个CSS框架，致力于简化Web开发。页面。它主要用于为用户创建交互式界面。 Bootstrap与许多布局，组件和实用程序捆绑在一起。该列是Bootstrap中网格布局的一部分。 Bootstrap 4中的网格系统是动态且流畅的。网格布局具有12列，并且由于网格系统是基于flexbox构建的，因此它具有充分的响应能力。边栏是Bootstrap的另一个组件。侧边栏启用侧面导航。根据需要，侧边栏可以是左侧的，也可以是右侧的。在本文中，我们将演示左侧边栏以及一个在另一个下方的列。

第一种方法：在第一种方法中，我们将演示一个始终打开并固定在页面左侧的侧边栏。该代码包含嵌套的行和列，以获取所需的输出。 



  

    

  

    
    

        
        

            
            

                
                

                    
                    
Menu
                    

                

                
                

                    

                        Link 1
 

                        Link 2


                        Link 3
                    

                

  
            

            
            

                

                    
Page Content
                    

                

                
                

                    

                        Bootstrap is a free and open-source
                        tool collection for creating responsive
                        websites and web applications.
                        It is the most popular HTML, CSS,
                        and JavaScript framework for developing
                        responsive, mobile-first web sites.
                    

                

                
                

                    

                        Bootstrap is a free and open-source tool
                        collection for creating responsive websites
                        and web applications. It is the most popular
                        HTML, CSS, and JavaScript framework for
                        developing responsive, mobile-first web sites.
                    

                

            

        

    


  
            

输出

第二种方法：在这种方法中，边栏不会始终保持打开状态。侧栏是可折叠的，并且在打开侧栏时页面内容会向右移动。这种设计使主要内容占据了网页上的整个空间，并且仅在需要时才打开导航面板。这标志着有效的空间管理。在这种方法中，页面加载时，侧边栏是隐藏的。当用户单击“汉堡包”按钮时，将触发side_open()javascript函数，并打开侧边栏。侧边栏现在可见，并且具有将其关闭的按钮。单击关闭按钮后，将触发side_close()JavaScript函数，并且侧边栏将关闭。在打开状态下，侧边栏占据页面宽度的25％，而在关闭状态下，侧边栏占据页面宽度的0％。因此，这两列会相应地进行调整。 




  

    
  
    
    
      
    
      
    

  

    
    

        
        

            
            

  
                
                
  
                
                
Menu

                Link 1

                

                Link 2

                

                Link 3
            

  
            
            

  
                
                
                

                    

                        
Page Content

                    

                

                

                    

                        Bootstrap is a free and open-source
                        tool collection for creating
                        responsive websites and web
                        applications. It is the most
                        popular HTML, CSS, and JavaScript
                        framework for developing responsive,
                        mobile-first web
                        sites.
                    

                

                

                    

                        Bootstrap is a free and open-source
                        tool collection for creating
                        responsive websites and web
                        applications. It is the most
                        popular HTML, CSS, and JavaScript
                        framework for developing responsive,
                        mobile-first web
                        sites.
                    

                

            

        

    

  
    
  
    

  

输出：