📜  如何在引导程序中对齐两个导航栏?

📅  最后修改于: 2021-10-29 04:33:51             🧑  作者: Mango

导航栏是 Web 应用程序的一部分,允许用户导航到网站的不同部分。顾名思义,navbar 基本上是一个导航栏。 Bootstrap 4 提供了一个内置的导航栏类,允许我们创建导航栏。此外,我们可以通过根据我们的要求定义各种 CSS 样式来创建自定义导航栏。在本文中,我们将演示使用 CSS 内置类和自定义 CSS 样式对齐两个导航栏的方法。

示例 1:在第一种方法中,我们使用了 Bootstrap 4 的内置导航栏类。两个导航栏一个接一个放置。第一个导航栏背景为深色,导航链接左对齐,而“注册”和“注销”按钮右对齐。第一个导航栏还包含一个下拉菜单,其中包含指向网站多个部分的链接。第二个导航栏的导航链接与右侧对齐,纯文本的超链接与左侧对齐。两个导航栏都响应屏幕尺寸。导航栏切换按钮在屏幕尺寸减小时出现,在屏幕尺寸增大时消失。单击切换按钮时会显示导航栏。

代码实现:

HTML


  

  
    
    
  
    
    
      
    

  

  
    
    
  
    
    

  


HTML


  

  
    
    
  
    
    
      
    
  
    

  

    
        Home         Feature         Deals         Blog         Login     
    
        More         Contact         About Us         Link         Logout         Register     
  


输出:

示例 2:在这种方法中,导航栏是使用自定义 CSS 样式创建的。 topnav类划分代表第一个导航栏,而bottomnav类划分代表第二个导航栏。第一个导航栏的左侧是导航链接,右侧是登录链接。第二个导航栏左侧是导航链接,右侧是“注册”和“注销”按钮。与前面的示例不同,此示例中的导航栏没有响应。导航栏不适应屏幕尺寸。

代码实现:

HTML



  

  
    
    
  
    
    
      
    
  
    

  

    
        Home         Feature         Deals         Blog         Login     
    
        More         Contact         About Us         Link         Logout         Register     
  

输出: