zoukankan      html  css  js  c++  java
  • Bootstrap系列 -- 27. 下拉菜单对齐方式

      Bootstrap框架中下拉菜单默认是左对齐,如果你想让下拉菜单相对于父容器右对齐时,可以在“dropdown-menu”上添加一个“pull-right”或者“dropdown-menu-right”类名。

    <h4>使用pull-right类使下拉菜单与父容器右边对齐</h4>
     <div class="dropdown">
      <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
        下拉菜单
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenu1">
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
        <li role="presentation" class="divider"></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
      </ul>
    </div>
    <br />
    <br />
    <h4>使用dropdown-menu-right类使下拉菜单与父容器右边对齐</h4>
    <div class="dropdown">
      <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
        下拉菜单
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dropdownMenu1">
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
        <li role="presentation" class="divider"></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
      </ul>
    </div> 
    <br />
    <br />
    <h4>下拉菜单与父容器左边对齐</h4>
    <div class="dropdown">
      <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
        下拉菜单
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu dropdown-menu-left" role="menu" aria-labelledby="dropdownMenu1">
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
        <li role="presentation" class="divider"></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
      </ul>
    </div> 

      与此同时,还有一个类名刚好与“dropdown-menu-right”相反的类名“dropdown-menu-left”,其效果就是让下拉菜单与父容器左边对齐,其实就是默认效果

      这里有个问题,如果右边对齐虽然设置了样式,但是很容易出现样式混乱,下拉菜单的位置是有 <div class="dropdown">的宽度来决定的,所以在不同的分辨率下会有所不同。

    这里解决方式一种是固定div的宽度,还有一种就是Button 放到右边

  • 相关阅读:
    WebSphere ssl证书公钥少于2048问题处理
    zookeeper安装教程(zookeeper3.4.5为例)
    jetty安装教程
    redis sentinel哨兵模式集群搭建教程
    redis安装教程
    物联网、大数据、云计算的区别与联系
    weblogic隐藏版本号教程(10.3.6为例)
    weblogic补丁安装失败(Patch B25A is mutually exclusive and cannot coexist with patch(es): UIAL)
    was重要文件位置备忘
    FileZilla Server隐藏版本号教程
  • 原文地址:https://www.cnblogs.com/qingyuan/p/4601143.html
Copyright © 2011-2022 走看看