首页 > 电脑专区 > 电脑教程 >

下拉菜单的多种应用方式示例

来源:互联网 版权归原作者所有,如有侵权,请联系我们

下拉菜单的多种应用方式示例xJX办公区 - 实用经验教程分享!

方法/步骤

  • 1

    Bootstrap中下拉菜单相对于父容器默认是左对齐的,如果想让下拉菜单相对于父容器右对齐,则可以在class="dropdown-menu"上添加class="pull-right"或者class="dropdown-menu-right"。当然,在Bootstrap中还提供了另外一个类class="dropdown-menu-left",这个是让下拉菜单居左显示,也就是默认形式,下面代码演示了基本的使用方法:xJX办公区 - 实用经验教程分享!

    下拉菜单的多种应用方式示例xJX办公区 - 实用经验教程分享!

    下拉菜单的多种应用方式示例xJX办公区 - 实用经验教程分享!

  • 2

    代码中使用了网格系统,这是为了更好地对比演示菜单居右显示的问题,其中第二个和第三个菜单使用了不同的方式来居右显示。接下来有一个问题需要特别注意,将网格系统中的class="col-lg-1"改为class="col-lg-3",代码如下:xJX办公区 - 实用经验教程分享!

    下拉菜单的多种应用方式示例xJX办公区 - 实用经验教程分享!

    下拉菜单的多种应用方式示例xJX办公区 - 实用经验教程分享!

  • 3

    何解决这个问题呢?我们需要先了解其本质。下拉菜单按钮在class="col-lg-3"中并未完全填充,而class="dropdown-menu"和父容器相关,要解决这个问题我们只需将下拉菜单的按钮居右显示即可,代码如下:xJX办公区 - 实用经验教程分享!

    下拉菜单的多种应用方式示例xJX办公区 - 实用经验教程分享!

  • 4

    我们在class="col-lg-3"中添加了类"text-right",让容器中的内容居右显示xJX办公区 - 实用经验教程分享!

    下拉菜单的多种应用方式示例xJX办公区 - 实用经验教程分享!

  • 4相关内容未经许可获取自百度经验
  • 以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!xJX办公区 - 实用经验教程分享!


    标签: 操作系统方式示例

    办公区 Copyright © 2016-2024 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号