首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

bootstrap中对齐按钮组的等宽下拉菜单

在Bootstrap中,对齐按钮组的等宽下拉菜单可以通过使用btn-groupdropdown-menu类来实现。

首先,创建一个按钮组,使用btn-group类包裹按钮元素。然后,在按钮组中添加一个下拉按钮,使用dropdown-toggle类来触发下拉菜单的显示。接下来,在下拉按钮中添加一个下拉菜单,使用dropdown-menu类来定义下拉菜单的样式。

下面是一个示例代码:

代码语言:html
复制
<div class="btn-group">
  <button type="button" class="btn btn-primary">按钮1</button>
  <button type="button" class="btn btn-primary">按钮2</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      下拉按钮
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">菜单项1</a>
      <a class="dropdown-item" href="#">菜单项2</a>
      <a class="dropdown-item" href="#">菜单项3</a>
    </div>
  </div>
</div>

在上述代码中,按钮1和按钮2是等宽的,并且下拉按钮与它们对齐。点击下拉按钮时,会显示一个下拉菜单,其中包含三个菜单项。

这种对齐按钮组的等宽下拉菜单在需要将多个相关操作组合在一起,并且希望它们以一种整齐的方式显示时非常有用。例如,在一个工具栏或导航栏中,可以使用这种按钮组来实现一组相关的操作按钮和下拉菜单。

腾讯云提供了一系列云计算产品,其中包括云服务器、云数据库、云存储等。您可以根据具体需求选择适合的产品来支持您的应用。更多关于腾讯云产品的信息,请访问腾讯云官方网站:腾讯云

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Bootstrap学习文档(三)

Bootstrap 注意下面的组件,很多是需要用到 js ,所以要引入 Bootstrap js 文件和 jquery 文件在示例代码,我只是没有写,注意加上哦。...btn-group 按钮 btn-group-* 改变按钮尺寸,* 内容为 lg md sm xs btn-group-vertical 按钮竖着排 btn-group-justified 让按钮两端对齐...按钮可以添加图标,比如说常见下拉按钮图标,,同时添加方式也有不同,下面还是给出了三种不同标签添加,input标签是不能这样使用。... 下拉菜单样式 下拉菜单除了上面默认样式还有其他不同样式,比如说下拉菜单对齐(默认是左对齐),下拉菜单里面也有样式可以选择...导航分为标签页式导航,面包屑式导航,两端对齐式导航,可以有需要选择使用,导航里面又可以放下拉菜单

5.9K20
  • BootStrap应用开发学习入门1

    .dropdown-menu-right 下拉菜单对齐 .dropdown-header 向下拉菜单标签区域添加标题提示 .disabled 下拉菜单禁用项 .divider 下拉菜单分割线...是用不可视方式给元素加label aria-labelledby #如果被描述元素存在真实描述元素,可使用它作为来绑定描述元素和被描述元素来代替 按钮下拉菜单 描述: 分割按钮左边是原始功能,右边是显示下拉菜单切换...#两端对齐导航 (在屏幕宽度大于 768px 时,通过在分别使用 .nav、.nav-tabs 或 .nav、.nav-pills 同时使用它,让标签式或胶囊式导航菜单与父元素等宽。)...(left / center / right ) 向左或向右对齐导航栏 导航链接、表单、按钮或文本 这些组件 .navbar-btn #导航栏按钮向不在 <button...(Button) 描述:添加进一些交互,比如控制按钮状态,或者为其他组件(如工具栏)创建按钮

    44.8K21

    Bootstrap学习笔记上(带源码)

    ☑ 基于html5、css3bootstrap,具有大量诱人特性:友好学习曲线,卓越兼容性,响应式设计,12列格网,样式向导文档。...(按钮工具栏) 类名btn-toolbar .btn-group-lg:大按钮 .btn-group-sm:小按钮 .btn-group-xs:超小按钮 <div class="btn-toolbar...<em>按钮</em><em>下拉菜单</em>从外观上看和<em>下拉菜单</em>效果基本上是一样<em>的</em>;简单点说就是点击一个<em>按钮</em>,会显示隐藏<em>的</em><em>下拉菜单</em> <em>按钮</em><em>下拉菜单</em>项 解析 <em>按钮</em><em>的</em>向下三角形,我们是通过在标签<em>中</em>添加一个“”标签元素,并且命名为“caret...border-top: 4px solid; border-right: 4px solid transparent; border-left: 4px solid transparent; } 在<em>按钮</em><em>中</em><em>的</em>三角形

    3.8K20

    BootStrap应用开发学习入门1

    .dropdown-menu-right 下拉菜单对齐 .dropdown-header 向下拉菜单标签区域添加标题提示 .disabled 下拉菜单禁用项 .divider 下拉菜单分割线...是用不可视方式给元素加label aria-labelledby #如果被描述元素存在真实描述元素,可使用它作为来绑定描述元素和被描述元素来代替 按钮下拉菜单 描述: 分割按钮左边是原始功能,右边是显示下拉菜单切换...#两端对齐导航 (在屏幕宽度大于 768px 时,通过在分别使用 .nav、.nav-tabs 或 .nav、.nav-pills 同时使用它,让标签式或胶囊式导航菜单与父元素等宽。)...(left / center / right ) 向左或向右对齐导航栏 导航链接、表单、按钮或文本 这些组件 .navbar-btn #导航栏按钮向不在 <button...(Button) 描述:添加进一些交互,比如控制按钮状态,或者为其他组件(如工具栏)创建按钮

    44.3K30

    Bootstrap响应式前端框架笔记七——下拉菜单

    Bootstrap响应式前端框架笔记七——下拉菜单     在BootstrapCss框架下拉菜单属于组件。一个完整下拉菜单应该有两部分组成,一个触发按钮与一个选项列表。...触发按钮dropdown-toggle类来创建,选项列表有drop-menu类来创建,这两部分元素需要包裹在一个dropdown类元素,才能正确组合,示例代码如下: 正常下拉菜单样式 金牛座 摩羯座 狮子座 默认创建下拉菜单是隐藏...使用dropdown-menu-left或者dropdown-menu-right可以实现对菜单列表对齐或者右对齐。    ...dropdown-header">属相 猴    另外,本篇博客中所有的实例代码及显示效果,在如下地址

    2.5K00

    BootStrap应用开发学习入门

    、背景基本结构 CSS样式: BS已经定义好了一套CSS样式表 布局组件: 用于创建图像、下拉菜单、导航、警告框、弹出框等等 JS插件: BootStrap定义了一套JS插件,这些插件已经默认实现了很多种效果...,列表项对齐 ( 和 ) .list-inline: 将所有列表项放置同一行 .dl-horizontal: 该类设置了浮动和偏移,应用于 元素和 元素,....btn-group-vertical #让一按钮垂直堆叠显示,而不是水平堆叠显示。 #自适应大小按钮 .btn-group-justified #类来设置自适应大小按钮。...注意: 如果是 元素, 你需要在外层使用 .btn-group 类来包裹 # 内嵌下拉菜单按钮 .dropdown-toggle #按钮内嵌按钮可以设置下拉菜单 , 还需要...-- 提供额外视觉效果,标识一按钮原始动作 --> 原始按钮 <!

    17.5K20

    Jump Start Bootstrap 第3章

    让我们开始创建第一个导航组件: Navs Navs是一排成一行用来导航链接;我们把这组链接呈现成标签或者按钮,在Bootstrap,它们被称为pills。...Navbar(导航条) Navbar是最有趣Bootstrap组件;但对于新手,不容易掌握;它带来了很多挑战,比如将头部和其余部分保持一致;正确地对齐链接、搜索栏和导航栏下拉菜单会使工作变得更加困难...您可以如下这样,轻松地将导航导航列表 元素转换为下拉菜单:【注:尝试在下拉菜单包含下拉菜单失败】 <div class...橙色 label-danger 红色 Button 在Bootstrap你可以轻松创建一个按钮。...小结 在本章,我们看到了一可重用Bootstrap组件,它们已经准备好被使用了。

    13.9K20

    Bootstrap: 简单使用

    ● 组件:无数可复用组件,包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能。 ● JavaScript 插件:是jQuery插件,带了一些其它功能。如:轮播图。...导入bootstrapcss样式文件 ‐‐> <!‐‐ 2....下面就介绍一下 Bootstrap 栅格系统特点: “行(row)”必须包含在 .container (固定宽度)或 .container-fluid (100% 宽度),以便为其赋予合适 排列(...通过“行(row)”在水平方向创建一“列(column)”。 你内容应当放置于“列(column)”内,并且,只有“列(column)”可以作为行(row)”直接子元素。...栅格系统列是通过指定1到12值来表示其跨越范围。例如,三个等宽列可以使用三个 .col-xs-4 来 创建。

    1.2K40

    BootStrap应用开发学习入门

    、背景基本结构 CSS样式: BS已经定义好了一套CSS样式表 布局组件: 用于创建图像、下拉菜单、导航、警告框、弹出框等等 JS插件: BootStrap定义了一套JS插件,这些插件已经默认实现了很多种效果...,列表项对齐 ( 和 ) .list-inline: 将所有列表项放置同一行 .dl-horizontal: 该类设置了浮动和偏移,应用于 元素和 元素,....btn-group-vertical #让一按钮垂直堆叠显示,而不是水平堆叠显示。 #自适应大小按钮 .btn-group-justified #类来设置自适应大小按钮。...注意: 如果是 元素, 你需要在外层使用 .btn-group 类来包裹 # 内嵌下拉菜单按钮 .dropdown-toggle #按钮内嵌按钮可以设置下拉菜单 , 还需要...-- 提供额外视觉效果,标识一按钮原始动作 --> 原始按钮 <!

    14.6K30

    BootStrap基础知识

    使用行来创建水平。 内容需要放置在列,并且只有列可以是行直接子节点。 预定义类如 .row 和 .col-* 可用于快速制作栅格布局。 列通过填充创建列内容之间间隙。...左对齐 / .text-center 居中 / .text-right 右对齐 / .text-justify 设定文本对齐,段落超出荧幕部分文字自动换行。.../ .list-unstyled 移除预设清单样式,清单项对齐 ( 和 )。...提示框在链接标签上添加 alert-link 类来设置匹配提示框颜色链接 可以在提示框 div 添加 .alert-dismissible 类,然后在关闭按钮链接上添加 class="close... .card 与 .card-body 类来创建一个简单的卡片 Bootstrap4 的卡片类似 Bootstrap 3 面板、图片缩略图、well .card-header类用于创建卡片头部样式

    28410

    bootstrap-suggest插件

    : 1.5.3 Controller层: 配置参数如下: 使用bootstrap-suggest时bug解决方案: 一、bootstrap-suggest 这是一个基于 bootstrap 按钮下拉菜单组件搜索建议插件...,必须使用于按钮下拉菜单组件上。...1.1 功能说明 搜索方式:从 data.value 有效字段数据查询 keyword 出现,或字段数据包含于 keyword 支持单关键字、多关键字输入搜索建议,多关键字可自定义分隔符...5、onHideDropdown:下拉菜单隐藏式触发 1.5 完整代码实现: 1、引入 jQuery、bootstrap.min.css、bootstrap.min.js 2、引入插件js: bootstrap-suggest.min.js...注意,应返回字符串 }; 提示:在 bootstrap v4 下, clearable 为 true 时,应引入 font-awesome 图标库,该清除按钮使用了 fa-plus 图标。

    10.9K40

    BootStrap初始

    这将在 Bootstrap CSS 部分详细讲解。 组件:Bootstrap 包含了十几个可重用组件,用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在 布局组件 部分详细讲解。...: css文件夹 js文件夹 引入Bootstrap文件 直接把整个下载好Bootstrap文件夹复制到相应文件里即可 在具体HTML文件中上图位置引入Bootstrap文件 处理依赖...例如,三个等宽列可以使用三个 .col-xs-4 来创建。 如果一“行(row)”包含了“列(column)”大于 12,多余“列(column)”所在元素将被作为一个整体另起一行排列。...,因为这在 Bootstrap 是默认(还记得 Bootstrap 是移动设备优先吗?)...全局样式 排版、按钮、表格、表单、图片等我们常用HTML元素,Bootstrap中都提供了全局样式。

    4.6K10

    Bootstrap响应式前端框架笔记八——按钮

    Bootstrap响应式前端框架笔记八——按钮     在Bootstrap定义Css样式,开发者可以将一btn控件包裹在btn-group类中使其组合成按钮控件,组合后控件左右两侧按钮将被圆角处理...也可以将一按钮包裹在btn-toolbar类,使其组合成为按钮工具栏,示例如下: 按钮工具栏 <div class...按钮也可以进行嵌套,使用按钮嵌套方式也可以实现下拉菜单效果,示例如下: 左按钮...默认按钮是水平排列,为其设置btn-group-vertical类可以将其设置为竖直排列,示例如下: 竖直排列按钮 <div class="btn-group-vertical...通过<em>按钮</em><em>组</em>,可以十分方便<em>的</em>实现分裂式<em>下拉菜单</em>,示例如下: 分裂式<em>下拉菜单</em> <button type="button" class

    1.6K20

    Bootstrap笔记

    让低版本浏览器可以支持CSS媒体查询功能基础CSS样式概要预置排版样式统一预制标签样式按钮样式表格样式表单样式图片样式辅助工具类代码样式栅格系统响应式工具类预置界面组件导航导航条面包屑导航下拉菜单按钮下拉菜单按钮输入框警告框页头分页列表面板媒体对象进度条...Glyphicons标签徽章缩略图大屏幕嵌入内容内嵌JavaScript插件JavaScript插件依赖情况如何使用Javascript插件内置组件模态对话框下拉菜单滚动监听标签页工具提示弹出框警告框按钮折叠面板轮播图吸顶效果...最小缩放initial-scale 第三方依赖 jQuery Bootstrap框架所有JS组件都依赖于jQuery实现 html5shiv 让低版本浏览器可以识别HTML5新标签...表格样式 表单样式 图片样式 辅助工具类 代码样式 栅格系统 响应式工具类 预置界面组件 导航 导航条 面包屑导航 下拉菜单 按钮下拉菜单 按钮 输入框 警告框 页头...插件 内置组件 模态对话框 下拉菜单 滚动监听 标签页 工具提示 弹出框 警告框 按钮 折叠面板 轮播图 吸顶效果 data-spy=”affix” data-offset-top=”什么位置出现”

    3.4K90
    领券