bootstrap37-Bootstrap 下拉菜单对齐方式

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Bootstrap 下拉菜单对齐方式</title>

<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">

</head>

<body>

<div class="container">

<div class="dropdown">

<button class="btn dropdown-toggle" 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 href="" role="menuitem" tabindex="-1" >java</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>

</div>

<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>

</html>

时间: 2024-08-21 11:44:09

bootstrap37-Bootstrap 下拉菜单对齐方式的相关文章

Bootstrap系列 -- 27. 下拉菜单对齐方式

Bootstrap框架中下拉菜单默认是左对齐,如果你想让下拉菜单相对于父容器右对齐时,可以在“dropdown-menu”上添加一个“pull-right”或者“dropdown-menu-right”类名. <h4>使用pull-right类使下拉菜单与父容器右边对齐</h4> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" ty

Bootstrap 下拉菜单(Dropdowns)

本章将重点介绍 Bootstrap 下拉菜单.下拉菜单是可切换的,是以列表格式显示链接的上下文菜单.这可以通过与 下拉菜单(Dropdown) JavaScript 插件 的互动来实现. 如需使用下拉菜单,只需要在 class .dropdown 内加上下拉菜单即可.下面的实例演示了基本的下拉菜单: <div class="dropdown"> <button type="button" class="btn dropdown-toggl

Bootstrap下拉菜单

[Bootstrap 下拉菜单] <div class="dropdown"> <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">主题 <span class="caret"></span> </but

Bootstrap 下拉菜单disabled

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 下拉菜单</title> <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"&g

Bootstrap下拉菜单的认识误区

Bootstrap下拉菜单HTML有两种写法: 一.内置式: <div class="dropdown">     <button class="btn btn-primary" data-toggle="dropdown">         下拉菜单         <span class="caret"></span>     </button>     <

安卓微信中bootstrap下拉菜单无法正常工作的解决方案

bootstrap下拉菜单组件描述:http://v3.bootcss.com/components/#dropdowns 问题环境:安卓4.4.2,微信6.2内置浏览器,bootstrap 3.1.1.1 问题描述:bootstrapV3的下拉菜单组件,在ios的微信浏览器中表现正常,但安卓微信浏览器中无法正常触发,安卓非微信浏览器可以触发 问题触发条件:未知 解决方案:去除button元素的属性data-toggle="dropdown",自己另外写一小段事件监听代码来切换div.

bootstrap下拉菜单插件

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 下拉菜单</title> <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"&g

bootstrap——下拉菜单右对齐

通过向 .dropdown-menu 添加 .pull-right 类来向右对齐下拉菜单. Bootstrap默认情况下,下拉菜单自动沿着父元素的上沿和左侧被定位为 100% 宽度. 为 .dropdown-menu 添加 .dropdown-menu-right 类可以让菜单右对齐.

Bootstrap 下拉菜单

1.下拉菜单基本介绍 下拉菜单是可以切换的,是以列表格式显示链接上下文. 基本格式: <div class="dropdown"> <!--触发器--> <button class="btn dropdown-toggle" data-toggle="dropdown"> 标题<span class="caret"></span> </button> &l