将两个按钮水平对齐bootstrap4

在Bootstrap 4中，可以使用以下方法将两个按钮水平对齐：

使用Flexbox布局：Flexbox是一种强大的CSS布局模型，可以轻松实现水平对齐。在父容器上添加d-flex类，然后使用justify-content-between类将子元素水平对齐。示例代码如下：

<div class="d-flex justify-content-between">
  <button class="btn btn-primary">按钮1</button>
  <button class="btn btn-primary">按钮2</button>
</div>

使用Grid系统：Bootstrap的Grid系统也可以实现水平对齐。将按钮包装在一个行（row）中，并使用列（col）来控制按钮的宽度。示例代码如下：

<div class="row">
  <div class="col">
    <button class="btn btn-primary">按钮1</button>
  </div>
  <div class="col">
    <button class="btn btn-primary">按钮2</button>
  </div>
</div>

使用浮动（Float）：在按钮上应用float-left类和float-right类，分别使按钮向左和向右浮动。示例代码如下：

<button class="btn btn-primary float-left">按钮1</button>
<button class="btn btn-primary float-right">按钮2</button>

以上是将两个按钮水平对齐的几种常用方法。根据具体的需求和布局，选择适合的方法即可。

腾讯云相关产品和产品介绍链接地址：

相关·内容

PHP直播源码，水平平分两个按钮

9313 0

开心档-软件开发入门之Bootstrap4 下拉菜单

Bootstrap4 下拉菜单 Bootstrap4 下拉菜单依赖于 popper.min.js。下拉菜单是可切换的，是以列表格式显示链接的上下文菜单。...我们可以使用一个按钮或链接来打开下拉菜单，按钮或链接需要添加 .dropdown-toggle 和 data-toggle="dropdown" 属性。...dropdown-item" href="#">Something else here ---- 下拉菜单中的分割线 .dropdown-divider 类用于在下拉菜单中创建一个水平的分割线...href="#">Active Disabled ---- 下拉菜单的定位如果我们想让下拉菜单右对齐...我们可以在按钮中添加下拉菜单：实例 Sony</button

6941 0

备考1+x前端证书

">Disabled 核心类名 nav nav nav nav 响应式导航栏 .navbar-expand-xl|lg|md|sm 类来创建响应式的导航栏 (大屏幕水平铺开...navbar-expand-lg 就是大于lg的宽度展示全部导航栏小于则展示面包屑菜单折叠导航栏实操题重点导航栏组件 .navbar 表单堆叠表单 form-group 内联表单 form-inline 按钮....btn .btn btn-info 信息 .btn btn-primary 主要按钮 .btn btn-success 成功 .btn btn-info 信息 .btn btn-danger 危险...Content-Type","application/x-www-form-urlencoded"); 数据传输时字符串转码例如我只想传一个参数 content参数值为Sch0lar&age 可以看到这里&符号将age...} $arr1 = array( 'host'=>'localhost' ); //传入数组 $db1 = new Mysqldb($arr1); //将数组传入类里

4.1K5 0

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

Bootstrap4 Flex（弹性）布局 Bootstrap4 通过 flex 类来控制页面的布局。....flex-row 可以设置弹性子元素水平显示，这是默认的。...以下实例中前面两个子元素只设置了它们所需要的空间，最后一个获取剩余空间。... ---- 指定子元素对齐如果要设置指定子元素对齐对齐可以使用 .align-self-* 类来控制，包含的值有：.align-self-start, .align-self-end, .....flex-*-row-reverse 根据不同的屏幕设备在水平方向显示弹性子元素，且右对齐 .flex-*-column 根据不同的屏幕设备在垂直方向显示弹性子元素 .flex-*-column-reverse

7672 0

16. Vue 常用列表操作实例 - 增加列表数据

使用 v-for 渲染列表数据将列表中的数据写成一个list数组，然后使用 v-for 进行遍历。 ? 定义数据list数组，下面使用 v-for 进行数据遍历，如下： ?...增加列表数据使用 v-model 绑定 id、name的数据，并且设置一个click的绑定事件，将数据增加到list数组中。 ? ? 浏览器执行效果如下： ?...添加数据 ID：4, Name: 千里马的数据，并点击添加按钮，触发添加数据。 ? 完整实例代码如下： <input type="button" value="添加" class="btn btn-primary ml-2 mb-3" @click...], }, methods:{ add(){ // 将数据加入

1.6K1 0

BootStrap基础知识

align-self-* 设置指定子元素对齐对齐。...flex-*-row-reverse 根据不同的荧幕设备在水平方向显示弹性子元素且右对齐 flex-*-column 根据不同的荧幕设备在垂直方向显示弹性子元素 flex-*-column-reverse...Bootstrap 提供了两个事件给予轮播使用。两个事件都具有以下附加属性： direction: 轮播滑动的方向 ("left" 或 "right")。...内联表单需要在元素上添加 .form-inline 类所有内联表单中的元素都是左对齐的在荧幕宽度小于 576px 时为垂直堆叠，如果荧幕宽度大于等于 576px 时表单元素才会显示在同一个水平线上...rounded-top 上方两个角添加圆角 rounded-right 右方两个角添加圆角 rounded-bottom 下方两个角添加圆角 rounded-left 左方两个角添加圆角 rounded-circle

2601 0

12. Vue 常用列表操作实例 - 增加列表数据

-- 查询按钮 --> ...增加列表数据使用「v-model」绑定「id」、「name」的数据，并且设置一个「click」的绑定事件，将数据增加到「list」数组中。...浏览器执行效果如下：添加数据 ID：4, Name: 千里马的数据，并点击添加按钮，触发添加数据。完整实例代码如下： <input type="button" value="添加" class="btn btn-primary ml-2 mb-3" @click...], }, methods:{ add(){ // 将数据加入

2.3K1 0

13. Vue 常用列表操作实例 - 删除列表数据

"> ...], }, methods:{ add(){ // 将数据加入...2.1 使用some方法遍历数组，当return true则终止循环在浏览器中点击「删除」按钮，查看打印的数组索引，如下：那么再来看看findIndex方法来定位数组的索引。...2.2 使用findIndex方法定位数组的索引在浏览器中点击「删除」按钮，查看打印的数组索引，如下：可以看出findIndex方法直接就将终止位置的索引index返回。 3.

3.2K1 0

43. Vue组件案例-评论列表

编写这个案例步骤大致如下：编写一个基本的样式页面，页面内容有两部分：提交评论信息表单、展示评论信息的列表那么提交评论信息表单可以写为一个子组件，而评论信息列表为父组件给提交评论信息表单将子组件的评论内容传递到父组件评论信息列表..."> <script type="...实现思路：首先组件设置data参数：评论者user和评论内容comments，使用v-model绑定<em>两个</em>文本框的值，然后给添加<em>按钮</em>设置click方法，在方法中将user 和comments存储到localStorage...5.设置提交<em>按钮</em>的click事件，打印评论数据 ? 在浏览器查看一下打印出来的数据，如下： ? 已经可以获取到数据了，下面将其进行存储。...6.<em>将</em>获取的user和comment存储到localStorage中 ? 打开浏览器，查看存储的数据，如下： ? 7.存储评论内容数据完毕后，清空输入框 ? 好了，这时候已经设置添加好评论内容的数据。

2.1K3 0

41. Vue组件案例-评论列表

编写这个案例步骤大致如下：编写一个基本的样式页面，页面内容有两部分：提交评论信息表单、展示评论信息的列表那么「提交评论信息表单」可以写为一个子组件，而「评论信息列表」为父组件给「提交评论信息表单」将子组件的评论内容传递到父组件..."> ...实现思路：首先组件设置data参数：评论者user和评论内容comments，使用v-model绑定两个文本框的值，然后给添加按钮设置click方法，在方法中将user 和comments存储到localStorage...6.将获取的user和comment存储到localStorage中打开浏览器，查看存储的数据，如下： 7.存储评论内容数据完毕后，清空输入框好了，这时候已经设置添加好评论内容的数据。

1.9K1 0

17. Vue 常用列表操作实例 - 删除列表数据

"> ...], }, methods:{ add(){ // 将数据加入...在浏览器中点击删除按钮，查看打印的数组索引，如下： ? 那么再来看看findIndex方法来定位数组的索引。 2.2 使用findIndex方法定位数组的索引 ?...在浏览器中点击删除按钮，查看打印的数组索引，如下： ? 可以看出findIndex方法直接就将终止位置的索引index返回。 3.

3.6K3 0

【BootStrap】简单聊一聊CSS全局样式和表格样式-附有源码

4、文本对齐样式：.text-left、.text-center、.text-right、.text-justify .text-left：文本左对齐 .text-right：右对齐 .text-center...：居中对齐 .text-justify：两端对齐左对齐:正文正正文正文正文正文正 <div class="text-right...在这里，我发现<em>BootStrap4</em>不支持ul在一行显示，也就是添加class=”list-inline”是无效的。所以，我在这里就改用bootstrap3了。...表格样式 1、.table ：表格全局样式(少量padding和<em>水平</em>方向的分割线)。...7、响应式表格： <em>将</em>.table元素包裹在.table-responsive元素内，即可创建响应式表格当屏幕宽度小于768px时，表格会出现滚动条。

3.4K1 0

android:layout_gravity和android:gravity的区别

例如，在一个Button按钮控件中设置如下两个属性， android:gravity=”left”和android:text=”提交”，这时Button上的文字“提交”将会位于Button的左部。...同样，当我们在Button按钮控件中设置android:layout_gravity=”left”属性时，表示该Button按钮将位于界面的左部。...水平对齐方式：水平方向上居中对齐 fill_horizontal 必要的时候增加对象的横向大小，以完全充满其容器....水平方向裁剪我们主要来看看 center_vertical和center_horizontal两个属性值，center_vertical是指将对象在垂直方向上居中对齐，即在从上到下的方向上选择中间的位置放好...；center_horizontal是指将对象水平方向上居中对齐，即在从左到右的方向上选择中间的位置放好。

1.6K2 0

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

, 默认的垂直间距和水平间距 , 创建流式布局 ; /** * 构造一个新的FlowLayout，具有居中对齐和 * 默认水平和垂直间隔为5..., 默认的垂直间距和水平间距 , 创建流式布局 ; /** * 构造一个新的FlowLayout * 对齐和默认的5单元水平和垂直差距。...* 使用指定的对齐方式创建一个新的流布局管理器 * 以及指示的水平和垂直间隙。...Swing 中引入的 ; 在 BoxLayout 布局中 , 可以在垂直和水平两个方向上摆放 Component 组件 ; 十八、BoxLayout 布局 API ---- BoxLayout...box3.add(box2); // 将存放两组按钮的 Box 容器放入 Frame 窗口 frame.add(box3); // III.

4.1K2 0

鸿蒙HarmonyOS应用开发-Column&Row组件

Row表示沿水平方向布局的容器。主轴和交叉轴概念在布局容器中，默认存在两根轴，分别是主轴和交叉轴，这两个轴始终是相互垂直的。不同的容器中主轴的方向不一样的。...接下来，我们将详细讲解Column和Row容器的两个属性justifyContent和alignItems。...Center（默认值）：设置子组件在水平方向上居中对齐。End：设置子组件在水平方向上按照末端对齐。...两个文本组件展示的内容是按水平方向布局的，使用两端对齐的方式。...这里按钮的间距是一致的，我们可以通过配置可选参数space来设置按钮间距，使子组件间距一致。

2251 0

网页设计太麻烦

免费下载 Shards是一个基于Bootstrap4的现代设计系统，包含10个额外的自定义组件和2个预构建的登陆页面。整个文件非常轻巧，其样式表压缩后仅为13KB。...免费下载 Bootstrap-ecommerce ui kit是一个开源工具包工具包, 其HTML，CSS和JS技术允许将这个工具包适用于电子商务网站，市场营销和产品预订网站的开发。...免费下载 Stream UI Kit是一款开源Bootstrap4 UI Kit，包含5个漂亮的完整页面，包括20多个可重复使用和可自定义的UI模块，例如色彩，排版，字体，按钮等等。...采用最新的Bootstrap4，React JS和Material Design构建，可免费用于个人和商业用途。...免费下载 Material Admin是完全使用Bootstrap框架构建的免费管理模板，提供按钮、图标、表格、排版等基础组件。

3.8K3 0

【愚公系列】2023年10月 WPF控件专题 StackPanel控件详解

TextBlock子元素，这两个元素会在垂直方向上堆叠。...如果将Orientation属性设置为Horizontal，则两个TextBlock元素会在水平方向上堆叠。 StackPanel也可以包含其他的容器控件，例如Grid和StackPanel。...StackPanel包含了两个TextBlock子元素，这两个元素会在垂直方向上堆叠。整个StackPanel会将Grid和StackPanel在水平方向上堆叠。...HorizontalAlignment和VerticalAlignment属性：用于指定StackPanel在其父元素中的水平对齐和垂直对齐方式。...例如，一个垂直按钮菜单或者一个竖直的导航栏。水平布局：当需要将多个控件按照水平方向排列时，也可以使用StackPanel控件。例如，水平按钮菜单或者页眉。

5310 0

一篇文章让你读懂PyQt5布局管理，绝对干货

水平布局：控件默认按照从左到右的顺序进行横向添加。栅格布局：将窗口分为若干行(row)和列(column)。表单布局：控件以两列的形式布局在窗口中，左边为标签，右边为输入控件。...：参数描述 QtCore.Qt.AlignLeft 水平方向居左对齐 QtCore.Qt.AlignRight 水平方向居右对齐 QtCore.Qt.AlignCenter 水平方向居中对齐 QtCore.Qt.AlignJustify...水平方向两端对齐 QtCore.Qt.AlignTop 垂直方向靠上对齐 QtCore.Qt.AlignBottom 垂直方向靠下对齐 QtCore.Qt.AlignVCenter 垂直方向居中对齐...在两个控件后增加这一行，相当于水平布局中存在：按钮1-按钮2-stretch，此时addStretch的参数只要大于0，则表示占满整个布局最后一部分，前面的控件显示为正常大小，不要拉伸。 ?...这一行加入到布局中所有控件之前，相当于水平布局中存在：stretch-按钮1-按钮2，表示占满整个布局的最开始部分，后面的控件显示为正常大小，不要拉伸。 ?

19.9K2 1

【Android 应用开发】AndroidUI设计之布局管理器 - 详细解析布局实现

); 作用 : 设置垂直布局时两个按钮之间的分隔条; (3)对齐方式(控制内部子元素) xml属性 : android:gravity; 设置方法 : setGravity(int); 作用...实际案例 (1) 按钮排列要点 : 底部 + 水平居中对齐属性 : 左边的LinearLayout的android:gravity 属性为bottom|center_horizontal; ..., 右边的android:gravity的属性值为 right|center_vertical; (2) 三个按钮各自对齐三个水平方向的按钮, 分别左对齐, 居中对齐, 右对齐 : 要点 : 水平线性布局...梅花布局效果五个按钮排成梅花形状, 梅花处于正中心, 效果图如下 : 两个按钮, 如果只有 android:layout_above="@+id/bt1" 会是这种情况 : 加上 android...三个水平方向的按钮分别左对齐,居中对齐,右对齐要点 : 给FrameLayout中的三个按钮分别设置不同的layout_gravity,left ,center_horizontal,right,

2.4K4 0

【移动端网页布局】流式布局案例 ② ( 实现顶部固定定位提示栏 | 布局元素百分比设置 | 列表样式设置 | 默认样式设置 )

*/ width: 25%; background-color: #F63515; } 5、设置图像宽度关闭按钮和 LOGO 按钮包含两个图片 , 要为图片设置宽度 , 以及对齐方式...; 这里特别注意 , 默认的图片对齐方式是基线对齐 , 只要不是基线对齐 , 随便设置顶部 / 底部 / 中部对齐都可以实现图像居中 ; .app ul li:nth-child(1) img {.../* 设置关闭按钮的图像宽度该图片自动水平 / 垂直对齐 */ width: 10px; } .app ul li:nth-child(2) img { /* 在 10%...宽度占布局宽度 / 设备宽度的 8% */ width: 8%; } .app ul li:nth-child(1) img { /* 设置关闭按钮的图像宽度该图片自动水平 /...宽度占布局宽度 / 设备宽度的 8% */ width: 8%; } .app ul li:nth-child(1) img { /* 设置关闭按钮的图像宽度该图片自动水平 /

2K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云