在学习bootstrap中的下拉菜单时,遇到下面情况:

<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">

</ul>
</div>

添加ul的类名为pull-right或dropdown-menu-right,可以改变下拉菜单的对其方向,效果图为:

默认样式为:

下面贴上:.pull-right的css代码

.dropdown-menu.pull-right {
right:;
left: auto;
}
.dropdown-menu-right {
right:;
left: auto;
}

但还需要设置父元素div的样式为float:left!!!

原因:

div是块级元素,会自动填满父元素的宽度,效果图:

当设置了div的float为left之后,div会脱离文档流,从而包裹button元素,是菜单向button右边对齐

假如你有补充,请评论下。么么哒~~~

Bootstrap的下拉菜单float问题的更多相关文章

  1. Bootstrap按钮式下拉菜单

    前面的话 按钮式下拉菜单仅从外观上看,和下拉菜单效果基本上是一样的.不同的是普通的下拉菜单是block元素,而按钮式下拉菜单是inline-block元素.本文将详细介绍Bootstrap按钮式下拉菜 ...

  2. bootstrap多级下拉菜单

    只需为下拉菜单的任意 <li> 元素添加 .dropdown-submenu 的类,并在该 <li> 元素下添加 .dropdown-menu 类的列表,就可以为该菜单项添加一 ...

  3. 创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件

    Bootstrap是当下流行的前端UI组件库之一.利用Bootstrap,可以很方便的构造美观.统一的页面.把设计师从具体的UI编码中解放出来.   Bootstrap提供了不少的前端UI组件.带下拉 ...

  4. bootstrap的下拉菜单组件与导航条

    前期准备:bootstrap的css文件和js文件先引入 Bootstrap 组件-拉下菜单(class+js) 下拉菜单必需三级结构 <div class="dropdown&quo ...

  5. bootstrap悬停下拉菜单显示

    使用Bootstrap导航条组件时,如果你的导航条带有下拉菜单,那么这个带下拉菜单的导航在点击时只会浮出下拉菜单,它本身的href属性会失效,也就是失去了超链接功能,这并不是我想要的,我希望导航条的链 ...

  6. Bootstrap 按钮下拉菜单

    向下拉 <div class="dropdown"> <button class="btn btn-default" data-toggle= ...

  7. bootstrap 多级下拉菜单

    如上效果: 实现代码: 导入js和css: <link rel="stylesheet" href="http://cdn.static.runoob.com/li ...

  8. bootstrap垂直下拉菜单默认展开

    HTML: <div class="col-md-3"> <nav class="navbar"> <div class=&quo ...

  9. Bootstrap <基础十二>下拉菜单(Dropdowns)

    Bootstrap 下拉菜单.下拉菜单是可切换的,是以列表格式显示链接的上下文菜单.这可以通过与 下拉菜单(Dropdown) JavaScript 插件 的互动来实现. 如需使用下列菜单,只需要在 ...

随机推荐

  1. js实现页面跳转的两种方式

      CreateTime--2017年8月24日08:13:52Author:Marydon js实现页面跳转的两种方式 方式一: window.location.href = url 说明:我们常用 ...

  2. mac下在eclipse中怎样清除/切换svn

    1.打开终端,即用户的根文件夹(用户的home文件夹) 进入.subversion下的auth文件夹 localhost:auth brj$ pwd /Users/brj/.subversion/au ...

  3. Hibernate的批量操作

    在实际的操作中,会经常的遇到批量的操作,使用hibernate将 100条记录插入到数据库的一个很自然的做法可能是这样的 Session session = sessionFactory.openSe ...

  4. centos 基础环境配置

    1,安装EPEL的yum源 EPEL 是 Extra Packages for Enterprise Linux 的缩写(EPEL),是用于 Fedora-based Red Hat Enterpri ...

  5. HDFS原理解析(整体架构,读写操作流程及源代码查看等)

    前言 HDFS 是一个能够面向大规模数据使用的.可进行扩展的文件存储与传递系统.是一种同意文件通过网络在多台主机上分享的文件系统,可让多机器上的多用户分享文件和存储空间.让实际上是通过网络来訪问文件的 ...

  6. FIFO、LRU、OPT页面调度算法及样例

    网上非常多介绍3种页面置换算法的样例和过程是不对的, 本文依据<操作系统概念>第七版对三种算法做介绍,并给出正确的样例以验证算法. 一.FIFO先进先出页面置换算法,创建一个FIFO队列来 ...

  7. mysql创建账号对应的数据库方法

    增加一个用户mydb密码为123450, 让他只可以在(localhost/%)%表示可以支持远程上登录,并可以对数据库mydata5_db进行查询.插入.修改.删除的操作. grant select ...

  8. Mac 全局变量 ~/.bash_profile 文件不存在的问题

    不存在就新建呗~ $ cd ~/ $ touch .bash_profile $ open -e .bash_profile 然后输入以下内容 # set color的部分是配置iterm2的字体颜色 ...

  9. 把一个base64编码的图片绘制到canvas (canvas的图片在转成dataurl)

    把一个base64编码的图片绘制到canvas 需要引入jquery. <canvas id="myCanvas" width="800" height= ...

  10. php get_called_class()函数与get_class函数的区别

    get_class (): 获取当前调用方法的类名: get_called_class():获取静态绑定后的类名: 有例为证: class Foo{ public function test(){ v ...