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

如何在bootstrap 4中垂直对齐表单行类中的按钮

在Bootstrap 4中,可以使用内置的类来实现垂直对齐表单行类中的按钮。以下是一种常见的方法:

  1. 首先,确保你已经正确引入了Bootstrap 4的CSS文件和相关的JavaScript文件。
  2. 在HTML中,创建一个表单,并在表单中添加一个按钮。例如:
代码语言:txt
复制
<form>
  <div class="form-row align-items-center">
    <div class="col-auto">
      <label class="sr-only" for="inlineFormInput">Name</label>
      <input type="text" class="form-control mb-2" id="inlineFormInput" placeholder="Jane Doe">
    </div>
    <div class="col-auto">
      <label class="sr-only" for="inlineFormInputGroup">Username</label>
      <div class="input-group mb-2">
        <div class="input-group-prepend">
          <div class="input-group-text">@</div>
        </div>
        <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Username">
      </div>
    </div>
    <div class="col-auto">
      <button type="submit" class="btn btn-primary mb-2">Submit</button>
    </div>
  </div>
</form>
  1. 在上述代码中,我们使用了align-items-center类来实现垂直居中对齐。这个类应用在form-row元素上,它会将其内部的元素垂直居中对齐。
  2. 另外,我们还使用了col-auto类来指定每个表单元素的宽度自动调整。这样可以确保表单元素和按钮在同一行显示。
  3. 最后,我们使用了mb-2类来添加一些底部的间距,以增加表单的可读性。

这样,你就可以在Bootstrap 4中垂直对齐表单行类中的按钮了。

关于Bootstrap 4的更多信息和使用方法,你可以参考腾讯云的Bootstrap 4产品介绍页面:Bootstrap 4产品介绍

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

相关·内容

BootStrap基础知识

使用行来创建水平列组。 内容需要放置在列,并且只有列可以是行直接子节点。 预定义 .row 和 .col-* 可用于快速制作栅格布局。 列通过填充创建列内容之间间隙。...设置 flex 容器是单行或者多行。 align-items-* 设置单行子元素对齐。...可以在 标签中使用 dropdown-divider 用于在下拉式功能创建一个水平分割线 dropdown-header 用于在下拉式功能添加标题 active 会让下拉式功能选项高亮显示...在元素上 .dropdown-menu 后添加 .dropdown-menu-right ,使下拉式功能对齐。 dropright,下拉式功能向右弹出。...内联表单需要在 元素上添加 .form-inline 所有内联表单元素都是左对齐 在荧幕宽度 小于 576px 时为垂直堆叠,如果荧幕宽度 大于等于 576px 时表单元素才会显示在同一个水平线上

27910
  • CSS 入门指南:轻松掌握网页布局与样式设计艺术

    下面详细介绍这三个属性使用场景和区别。 align-items 属性 作用对象:作用在 Flexbox 或 Grid 容器单行/单列每个子项。...作用轴:用于调整 子元素在交叉轴(通常是垂直方向)上对齐。 使用场景:容器子元素在单行/单列情况下如何对齐。 典型值: flex-start:子元素与交叉轴起点对齐。...它仅在容器有多行/多列时生效,单行/单列时不影响布局。 作用对象:对齐是 多行或多列内容。 典型值: flex-start:行或列与交叉轴起点对齐。 flex-end:行或列与交叉轴终点对齐。...text-align 属性 应用场景:text-align 主要用于文本对齐,它决定了 行内元素 或 块级元素文本 如何在水平方向对齐。...text-align 适用于块级元素文本内容,而不是用于整个容器内子元素对齐。 作用对象:对齐是 文本或行内元素,例如文本、图片、按钮等。 典型值: left:文本或行内元素左对齐(默认)。

    8010

    开心档-软件开发入门之Bootstrap4 Flex(弹性)布局

    Bootstrap4 Flex(弹性)布局 Bootstrap4 通过 flex 来控制页面的布局。...这些在只有一行弹性子元素是无效。 实例 ..... ---- 子元素对齐 如果要设置单行子元素对齐可以使用 .align-items-* 来控制,包含值有: .align-items-start, .align-items-end,...我们可以根据不同设备,设置 flex ,从而实现页面响应式布局,以下表格 * 号可以值有:sm, md, lg 或 xl, 对应是小型设备、中型设备,大型设备,超大型设备。....flex-*-row-reverse 根据不同屏幕设备在水平方向显示弹性子元素,且右对齐 .flex-*-column 根据不同屏幕设备在垂直方向显示弹性子元素 .flex-*-column-reverse

    77420

    【Python篇】PyQt5 超详细教程——由入门到精通(序篇)

    2.2 基本 PyQt5 窗口与布局 QWidget 与 QMainWindow 区别 QWidget:是 PyQt5 所有控件(如按钮、标签、文本框等)。...我们先在窗口中添加了一个标签,然后再添加了两个水平排列按钮按钮排列在水平布局,水平布局本身又嵌入到了垂直布局,形成了一种灵活组合布局。...2.7 总结 在这一部分,我们学习了如何在 PyQt5 中使用布局管理器来组织窗口内控件。我们主要介绍了几种常见布局方式: QVBoxLayout:垂直排列控件。...你可以设置标签内容、字体、对齐方式等。 setAlignment(Qt.AlignCenter):将标签文本设置为居中对齐。...最后,我们深入探讨了 PyQt5 常用控件, QLabel、QPushButton、QLineEdit 和 QCheckBox,展示了如何使用这些控件处理基本用户交互。

    1.4K10

    【Java AWT 图形界面编程】LayoutManager 布局管理器总结 ( FlowLayout 布局 | BorderLayout 布局 | BoxLayout 布局 )

    , : 在 Windows 设置 100 px 效果 , 与 在 Linux 设置 200 px 效果正好合适 ; 如果手动设置了组件 宽高 , 位置 等精确像素值 , 那么会 降低程序适配效果...; : 下面的布局就是从左向右流式布局 , 将 6 个组件放在 FlowLayout 流式布局 , 1 , 2 , 3 组件放入后 , 再 放入 4 组件 , 发现第 1 排位置不够了 ,...对齐方式 , 默认 垂直间距 和 水平间距 , 创建流式布局 ; /** * 构造一个新FlowLayout,具有居中对齐和 * 默认水平和垂直间隔为...* 使用指定对齐方式创建一个新流布局管理器 * 以及指示水平和垂直间隙。...--- GridLayout 构造函数 : GridLayout() : 单行网格布局 ; /** * 创建一个默认为每个组件一列网格布局, * 在单行

    4.2K20

    java swing入门教程_java swing基础(菜鸟教程学习)

    Java Swing介绍 1.Swing是一个为java世纪GUI工具包 2.Swing是JAVA基础一部分 3.Swing包括了图形用户界面(GUI)器件:文本框,按钮,分隔窗格和 4个器件...JPanel java图形用户界面(GUI)工具包swing面板容器,包含在javax.swing包,可以进行嵌套,功能是对窗体具有相同逻辑功能组件进行组合,是一种轻量级容器,可以加入到JFrame...可以通过设置垂直和水平对齐方式,指定标签显示区中标签内容在何处对齐。默认情况下,标签在显示区内垂直居中对齐。默认情况下,只显示文本标签是开始边对齐。而只显示图像标签则水平居中对齐。...好累 这些官方话敲我好累。。。偏偏我又不会用白话解释 JTextField 一个轻量级组建,允许编辑单行文本。...用于创建按钮类似实例“Login”。 嗯 虽然大部分菜鸟驿站照抄大半,但有自己理解和注入,所以原创吧原创吧。

    2.5K20

    AWT常用组件

    用于放置提示性文本 List JU框组件,可以添加多项条目 Panel 不能单独存在基本容器,必须放到其他容器 Scrollbar 滑动条组件。...ScrollPane 带水平及垂直滚动条容器组件 TextArea 多行文本域 TextField 单行文本框 这些 AWT 组件用法比较简单,可以查阅 API 文档来获取它们各自构方法、成员方法等详细信息...它们参数 alignment是用于指定对齐方式 int 型数据,在 Label 为其定义了3个静态常量:Label.LEFT 表示左对齐(int 值 0), Label.CENTER 表示居中对齐...通常,一个按钮对应着一种特定操作,确定、保存、取消等,从而用户可以用鼠标单击它来控制程序运行流程。AWTButton 实例化按钮对象,该类构造方法进行了两次重载。...作为同一组多个单选按钮组件是互斥,即每一时刻只能有一个组件状态为“true”,从而实现单项选择。 在AWT,单选按钮对象创建也是通过 Checkbox实例化

    9310

    BootStrap应用开发学习入门

    、背景基本结构 CSS样式: BS已经定义好了一套CSS样式 布局组件: 用于创建图像、下拉菜单、导航、警告框、弹出框等等 JS插件: BootStrap定义了一套JS插件,这些插件已经默认实现了很多种效果...,列表项对齐 ( 和 ) .list-inline: 将所有列表项放置同一行 .dl-horizontal: 该类设置了浮动和偏移,应用于 元素和 元素,... #垂直表单 是 Bootstrap 自带,个别的表单控件自动接收一些全局样式 .form-inline #内联表单 它所有元素是内联,向左对齐,标签是并排....btn-group-vertical #让一组按钮垂直堆叠显示,而不是水平堆叠显示。 #自适应大小按钮组 .btn-group-justified #来设置自适应大小按钮组。...从 v3.2.0 版本起,形如 .visible-- 针对每种屏幕大小都有了三种变体,每个针对 CSS 不同 display 属性,以超小屏幕(xs)为例,可用 .visible-*-*

    17.5K20

    BootStrap应用开发学习入门

    、背景基本结构 CSS样式: BS已经定义好了一套CSS样式 布局组件: 用于创建图像、下拉菜单、导航、警告框、弹出框等等 JS插件: BootStrap定义了一套JS插件,这些插件已经默认实现了很多种效果...,列表项对齐 ( 和 ) .list-inline: 将所有列表项放置同一行 .dl-horizontal: 该类设置了浮动和偏移,应用于 元素和 元素,... #垂直表单 是 Bootstrap 自带,个别的表单控件自动接收一些全局样式 .form-inline #内联表单 它所有元素是内联,向左对齐,标签是并排....btn-group-vertical #让一组按钮垂直堆叠显示,而不是水平堆叠显示。 #自适应大小按钮组 .btn-group-justified #来设置自适应大小按钮组。...从 v3.2.0 版本起,形如 .visible-- 针对每种屏幕大小都有了三种变体,每个针对 CSS 不同 display 属性,以超小屏幕(xs)为例,可用 .visible-*-*

    14.6K30

    Bootstrap快速入门

    学习后最大感受就是:bootstrap让前端布局和渲染工作,由填空题变成了选择题。即便没有很强审美能力,也可以让网页简洁大方,颜值爆。 ?...first-child;通用css选择器*0优先级,即最低;如果2个css具有相同优先级,在样式后面的起作用。...bootstrap支持包括:hover鼠标划过时状态, :focus元素有焦点状态, :first-child, :last-child, :nth-child()指定元素一个或多个特定子元素...整体结构 首先介绍一下栅格系统工作原理 一行数据必须包含在一个.container,一遍为其赋予合适对齐方式和内边距padding。... BootStrapjs都遵循同样步骤来实现js插件,如下所示 声明立即调用函数,+function($){"use strict";}(jQuery); 定义插件及相关原型方法

    4.2K61

    深入Java Swing用户界面组件布局管理器:网格布局+面板+边界布局

    另外还有容器对齐和右对齐。要想使用这些对齐方式,需要在FlowLayout对象构造器中指定LEFT或者RIGHT参数。...参数:align LEFT、CENTER或者RIGHT • FlowLayout (int align, int hgap, int vgap) 采用指定对齐方式和组件间水平和垂直间距构造新FlowLayout...当容器缩放时,边缘组件厚度不会改变,而中部组件大小会发生变化。 可以通过指定BorderLayoutCENTER、NORTH、SOUTH、EAST和WEST常量添加组件。...网格布局 网格布局像电子数据一样,按行列排列所有的组件。不过,它每个单元大小都一样。图9-11计算器程序使用了网格布局来安排计算器按钮。...例如,如果想有一行相同尺寸按钮,那么就可以把按钮放置在一个面板里面,这个面板使用只有单行网格布局进行管理。

    3.5K30

    Material Design — 菜单(Menus)

    菜单 菜单形式是在短暂动作条上展示选项列表。 菜单出现在与按钮,操作或其他控件交互。菜单显示是一个一行只有一个选项选项列表。 如果不适用于某个情景,菜单项可能被禁用。...左:应用栏操作太多时将会设置一个菜单    右:包含五个选项菜单 菜单标签 按钮或控件标签应该简洁而准确地反映菜单内项目(如下图)。...---- 简单菜单(Simple Menus) 移动端或pc 使用列表简单菜单显示特定列表项选项。 垂直对齐 靠近屏幕边缘时,简单菜单将垂直重新对齐,以使所有菜单项完全可见。...取消选择 触摸菜单外部或按下系统“后退”按钮,取消操作并关闭菜单。 ? 简单菜单 ·打开时,简单菜单会尝试将当前选定菜单项目与列表项目垂直对齐。 当前选择菜单项突出显示(如下图)。 ?...向下展开简单菜单 ? 向上展开简单菜单 ·不要在简单菜单弹出第一个选项上放列表非已选项(如下图)。 ? ·但在靠近屏幕边缘时,简单菜单会重新定位其垂直对齐方式,以便所有菜单项都完全可见。

    5.8K100

    Web-CSS

    MDN 1.样式定义方式 行内样式(inline style sheet) 直接定义在标签style属性。 作用范围:仅对当前标签产生影响。...> ---- 外部样式(external style sheet) 定义在css样式文件,通过选择器影响对应标签。...flex-direction CSS flex-direction 属性指定了内部元素是如何在 flex 容器布局,定义了主轴方向(正方向或反方向)。...取值: flex-start:所有行从垂直轴起点开始填充。第一行垂直轴起点边和容器垂直轴起点边对齐。接下来每一行紧跟前一行。 flex-end:所有行从垂直轴末尾开始填充。...最后一行垂直轴终点和容器垂直轴终点对齐。同时所有后续行与前一个对齐。 center:所有行朝向容器中心填充。每行互相紧挨,相对于容器居中对齐

    8.6K20

    17个场景,带你入门CSS布局

    为了能将设计稿 px 方便转换为页面 rem,我设置 1rem 为 宽度为 750px 设计稿 100px。...07 文字水平对齐 文字水平左对齐,居中对齐,右对齐。...代码如下: text-align: left; // 左对齐 text-align: center; // 居中对齐 text-align: right; // 右对齐 场景08 文字垂直居中 单行文本和多行文本垂直居中处理方式不一样...单行文本垂直居中。只需设置高度等于行高。 height: 25px; line-height: 25px; 多行文本垂直居中可以用 "场景12 多个元素垂直居中" 方法。...实现单行文字垂直居中,只需设置高度等于行高。 一个固定宽度元素水平居中,只需设置宽度值和左右margin值为auto。 Flex布局是目前主流布局技术。

    2.6K20

    移动端页面布局开发

    -webkit-appearance: none;才能给按钮/输入框添加自定义样式 禁用长按页面时弹出菜单img,a {-webkit-touch-callout: none;} 移动端常见布局 流式布局...(单行) align-items: flex-start; align-items: flex-end; align-items: center;挤在一起居中(垂直居中) align-items: stretch...2.align-self属性 控制子项自己在侧轴上排列方式 允许单个项目有与其他项目不一样对齐方式,可覆盖align-items属性。...less语法 1.less嵌套 子元素样式直接写到父元素里 如果有伪,伪元素选择器,交集选择器,内层选择器之前要加**&** .nav { .logo { color: green; } &::before...font-size大小 页面元素rem值= 页面元素值(px)/ html font-size大小 响应式布局(Bootstrap框架) 一.响应式布局容器 响应式需要一个父级作为布局容器,来配合子元素实现变化效果

    99720

    伸缩布局(CSS3)

    CSS3在布局方面做了非常大改进,使得我们对块级元素布局排列变得十分灵活,适应性非常强,其强大伸缩性,在响应式开可以发挥极大作用。...flex-direction: row 水平排列 http://m.ctrip.com/html5/ 携程网手机端地址 3、justify-content调整主轴对齐(水平对齐) 子盒子如何在父盒子里面水平对齐...相当于给每个盒子添加了左右margin外边距 4、align-items调整侧轴对齐垂直对齐) 子盒子如何在父盒子里面垂直对齐单行) 值 描述 白话文 stretch 默认值。...垂直对齐开始位置 上对齐 flex-end 项目位于容器结尾。...垂直对齐结束位置 底对齐 5、flex-wrap控制是否换行 当我们子盒子内容宽度多于父盒子时候如何处理 值 描述 nowrap 默认值。规定灵活项目不拆行或不拆列。

    4.4K50

    BootStrap】图片样式、辅助样式和CSS组件 -附源码

    按钮尺寸:.btn-group-lg、.btn-group-sm、.btn-group-xs .btn-group-vertical:垂直排列按钮组。...标签页(选项卡) .nav是标签页 .nav-tabs是标签页样式 .active是标签页状态(当前样式) .nav-pills胶囊式标签页 .nav-stacked胶囊式标签页堆放排列....navbar-brand:设置品牌图标样式 .collapse是折叠导航栏样式。 .navbar-collapse是折叠导航栏样式。 .nav是导航栏链接基。...导航链接、表单、按钮或文本对齐。 .navbar-btn:对于不在元素,实现垂直对齐。...好了,然后直接上完整源码: 完整源码链接: https://github.com/chenhaoxiang/BootStrap/tree/master/day3 像学后台,把这个BootStrap

    2.5K20
    领券