📌  相关文章
📜  如何使用Bootstrap设计全宽下拉Navbar？

📅  最后修改于: 2021-05-25 17:32:51             🧑  作者: Mango

在Bootstrap 4中，NavBar是用于菜单目的的基本组件。 NavBar包含许多项，例如文本，链接文本，禁用链接，下拉按钮，表单等。使用CSS属性或使用Bootstrap 4的默认实用程序，可以将下拉子项目变为全角。以下方法将清楚说明：

方法1：

  1. 在Bootstrap 4中，可以根据方便在内部或外部添加CSS属性，从而在Navbar中实现全宽下拉菜单。仅关注课程下拉菜单和下拉菜单。
  2. 第一个焦点下拉列表是dropdown-menu的父类，然后将其设置为静态，如下所示：
  3. 现在，将下拉菜单的顶部边缘设为零像素，并将宽度添加到100％。
  4. 然后添加框阴影以突出显示下拉菜单(装饰目的)，如下所示：
  5. 我们还可以通过内联方法使用CSS属性。

示例1：下面的示例说明如何使用CSS属性在Navbar中创建Bootstrap 4全宽下拉菜单。 



  

    
    
    
    
    
    
    

  

    

        

            

              GeeksforGeeeks
            

            Bootstrap 4 full width dropdown in Navbar
            

            

            
        

    

  

  

输出：
”

方法二：

  1. 在Bootstrap 4中，可以通过使用Bootstrap 4实用程序在Navbar中实现全宽下拉菜单。
  2. 与方法1类似，仅关注类下拉菜单和下拉菜单。
  3. 将类position-static和dropdown类一起添加，dropdown类是dropdown-menu的父类，如下所示： 
  4.
  5. 现在，添加w-100类，mt-0类以及dropdown-menu类，如下所示：

示例2：以下示例说明了如何使用Bootstrap 4实用程序在Navbar中制作Bootstrap 4全宽下拉菜单。 



  

    
    
    
    
    
    

  

    

        

            

              GeeksforGeeeks
            

            Bootstrap 4 full width dropdown in Navbar
            

            

            
        

    

  

  

输出：

参考： https://getbootstrap.com/docs/4.0/components/navbar/