开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

将Bootstrap 4按钮组与flexbox div的底部对齐

要将Bootstrap 4按钮组与一个使用flexbox的div的底部对齐，你可以使用Bootstrap的Flexbox实用程序类

html<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
    <div class="container mt-5">
        <div class="d-flex flex-column" style="height: 300px; border: 1px solid black;">
            <div class="flex-fill d-flex align-items-center justify-content-center">
                <p>这里是内容区域</p>
            </div>
            <div class="btn-group d-flex" role="group" aria-label="Button group">
                <button type="button" class="btn btn-primary">按钮1</button>
                <button type="button" class="btn btn-secondary">按钮2</button>
                <button type="button" class="btn btn-success">按钮3</button>
            </div>
        </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

在这个例子中，我们创建了一个带有边框的flexbox div（.d-flex.flex-column），并设置了高度。我们将内容区域（<p>这里是内容区域</p>）放在一个充满空间的div中（.flex-fill.d-flex.align-items-center.justify-content-center），使其垂直居中。

接下来，我们将按钮组（<div class="btn-group d-flex" role="group" aria-label="Button group">）放在内容区域下方，并使用.d-flex将其设置为flex容器。这会使按钮组在垂直方向上自动填充剩余空间，并在底部对齐。

最后，我们添加了一些Bootstrap 4的类来美化按钮和容器。

相关搜索:Bootstrap 4对齐项目- div flexbox中的底部将按钮与div底部对齐将Div与可点击翻转卡片的底部对齐(Bootstrap 4)Bootstrap 4 Flexbox -将多列与项目居中对齐将按钮组与div中的右端对齐 bootstrap 4中的对齐嵌套按钮组 Bootstrap4:底部垂直对齐按钮 bootstrap 4-等高列-对齐按钮底部 Bootstrap 4右对齐按钮组中的列表组 Bootstrap 4-将div垂直对齐到列的底部将按钮与网格底部对齐将按钮与CardView底部对齐将div顶部与同级div的底部对齐如何在底部的flexbox中对齐div？将img与相对div的底部对齐将div与父级的底部对齐 Bootstrap 4:将文本与引导按钮内的图标对齐后退按钮未将自身与div底部对齐 Bootstrap 4-将元素与其容器的底部对齐如何将div的内容与底部对齐？

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

CSS Flexbox 布局完全指南（一）：4000字，多示例讲解

图片都被纵向拉伸，并且挤在一行内，不能更丑 :( 这就是由于 Flexbox 布局的默认展示方式: 1、将所有的子元素压在一行内，不换行。...使用 Flexbox 如下布局： .card { flex: 0 0 250px} 这个样式将 flex-grow 和 flex-shrink 的值设为 0， flex-basis 值为 250px...一组列宽度相同的基础网格这些网格有以下特点： - 网格单元格平均布局并充满整行 - 单元格高度一致使用 Flexbox 很容易实现这个效果，看下面这个标识文本： div class="row"...给特定的元素加上 .row\_cell — bottom 类会让它在 row 内靠底部对齐 .row_cell--center { align-self: center} ?...整行的三个元素都靠底部对齐嵌套网格只需要简单的设置，rows（行元素）就可以嵌套布局。 ? 一行内有两个元素，其中一个是另一个的两倍大小。

4.5K2 0

BootStrap基础知识

2019年实习时的 BootStrap(4.x)基础知识备份 BootStrap5六角学院文档： HexSchool 顺便推荐一个程序员段子网站 techug.com 栅格系统栅格类例：div...="text-right">右对齐div> 默认设置 Bootstrap(4.x) 默认的 font-size 为 16px, line-height 为 1.5。...class="card"> div class="card-body">简单的卡片div> div> 可以通过 Bootstrap4 的 .card 与 .card-body 类来创建一个简单的卡片...Bootstrap4 的卡片类似 Bootstrap 3 中的面板、图片缩略图、well .card-header类用于创建卡片的头部样式，.card-footer 类用于创建卡片的底部样式。...div> div> 吐司是轻量级通知，目的在于模仿行动版和桌面版作业系统的推播通知。它们是用 flexbox 构建的，因此很容易对齐和定位。

3341 0

【Web前端】CSS传统布局方法（补充）

与Flexbox和CSS Grid相比，浮动布局缺乏对元素自动对齐和分布的支持。 3. 无法轻松实现垂直居中浮动布局的一个显著限制是无法轻松实现垂直居中对齐。...五、弹性盒网格（Flexbox） Flexbox 是一种全新的 CSS 布局方式，专为灵活布局设计。与传统的浮动布局相比，它具有更简洁的语法和更强的适应性。...Foundation网格系统 Foundation的网格系统非常灵活，也基于 flexbox，与Bootstrap相似，但在某些方面提供了更简便的语法和定制选项。...断点说明： Foundation中的断点与Bootstrap类似，但它的命名方式略有不同，用户还可以自定义断点。 ...都使用flexbox作为底层布局机制，提供灵活的列对齐和排序。不同之处：断点设置：Bootstrap的断点固定且命名简单，而Foundation允许用户自定义断点。

861 0

【Java 进阶篇】深入了解 Bootstrap 全局 CSS 样式

在本文中，我们将深入探讨 Bootstrap 的全局 CSS 样式，适合初学者，帮助他们更好地理解和应用这些样式。什么是全局 CSS 样式？...接下来，我们将深入了解这些样式的细节。排版排版是网页设计中的一个重要方面，Bootstrap 提供了一组排版样式，用于设置文本的字体、字号、行高和颜色。...text-left、text-center、text-right：用于文本的左对齐、居中对齐和右对齐。 text-muted：使文本显示为灰色，用于次要信息。... 这些样式使文本内容更容易阅读，同时提供了一些额外的视觉效果。链接和按钮样式链接和按钮是网页中的重要元素，Bootstrap 提供了一系列类，用于定义链接和按钮的样式。...border-top、border-bottom、border-left、border-right：用于添加顶部、底部、左侧和右侧的边框。 m-1、m-2、m-3：用于设置不同大小的外边距。

5432 0

《前端技术基础》第03章 CSS 布局【合集】

class="fixed">固定在底部的元素div> 这里是大量的内容，当页面滚动时，底部的元素始终保持可见。...Flexbox 通过将容器元素设置为display:flex，使其内部的子元素可以按照弹性规则进行排列。...在需要强调底部元素，或创造特殊视觉效果时使用，比如某些创意设计中希望打破常规的竖向排版顺序。示例4-4：与 Flexbox 布局（一维布局）不同，Grid通过将容器元素设置为display:grid，可以同时在水平和垂直方向上进行布局控制，为我们提供了更灵活的布局能力。...，取值同 justify-items，分别对应顶部对齐、底部对齐、居中对齐和拉伸填充。

450 0

【CSS】253- 从原型图到成品：步步深入 CSS 布局

CSS 的玩法可与 SKetch 或者 Photoshop 的玩法不一样。在本文中，我将向你展示如何以统筹全局的思维实现 CSS 布局，根治布局难产的顽疾。...此空间的大小也由默认样式控制：p 标签的顶部和底部都有 margin。你也会注意到按钮列表的圆点，以及列表的缩进行为。这些也都是默认样式。我们马上就要修改这些默认样式了。...（在 StackOverflow 查看更多详解）横排按钮要横排按钮有好几种方式。一种就是设置 Flex 子项的对齐方式。你应该对设置对齐方式很熟悉，每个富文本编辑器顶部都有这种功能的按钮： ?...它们把文本进行左对齐、居中对齐、右对齐以及 “两端对齐”，也就是铺满整行。在 Flexbox 布局中，你可以用 justify-content 属性来实现对齐。...如果将 border-radius 设为宽和高的一半（在本例中即为 24 像素），其效果就是一个圆形。

4.4K5 1

如何使用Flexbox和CSS Grid，实现高效布局

幸运的是，在现代网页设计时代，使用 Flexbox 和 CSS Grid 来对齐元素，变得相对容易起来。使用 Flexbox 可以使元素对齐变得容易，因此 Flexbox 已经被广泛使用了。...在导航中，使用 align-items: baseline; 能够实现所有导航项目与文本基线的对齐，这样也使得导航栏看起来更加统一。...尤其在控制列表元素样式和设置导航与按钮之间的间距方面，特别有用。使用 CSS Grid 创建布局为了测试效率，接下来使用 CSS Grid 创建相同的基本布局。...Flexbox 示例中的相同，但 CSS 与创建网格布局完全不同。...此外，Flexbox 可以动态调整元素。使用 Flexbox，可以将所有元素连成一条直线，这也确保了所有元素都具有相同的高度。带有文本和按钮的行内容下图是包含了“额外”文本和按钮的三个区域。

3.5K1 0

CSS Flexbox 布局完全指南（二）：3000字，多示例讲解

居中布局且先显示在页面上建立一个 Flexbox 格式文本 body { display: flex} 因为子元素应该从顶部到底部布局，所以我们要改变 Flexbox...在没有任何干预的情况下，它们会在从顶部到底部，填满父级元素。...item">… … 这个例子展示了输入框与按钮或是文字的结合...新建一个 Flexbox 格式文本： .form { display: flex} 确保输入框填满可用空间： .form__field { flex: 1} 最后，你可以按照你喜欢的方式在前后放入文字或者按钮...基本布局第二步将主体部分定义成一个 flex-container。 ? 将格式化文本建立成一个弹性容器第三步 flex-container 默认的 flex-direction 属性是 row。

2K2 0

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

下拉菜单对齐方式：.dropdown-menu-left和.dropdown-menu-right .divider：为下拉菜单添加分隔线，用于将多个链接分组。...按钮组 .btn-group：按钮组(可以实现将一组按钮放在同一行)。 .btn-toolbar：按钮组工具栏(将多个按钮组放在其中)。...按钮组的尺寸：.btn-group-lg、.btn-group-sm、.btn-group-xs .btn-group-vertical：垂直排列的按钮组。...按钮组的应用 div class="btn-toolbar"> div class=...导航链接、表单、按钮或文本对齐。 .navbar-btn：对于不在中的元素，实现垂直对齐。

2.5K2 0

分享 10 个常用且必须要掌握的 CSS 知识点

3px 4px5px ；// 顶部 2px，右侧 3px，底部 4px，左侧 5px 或使用单独的 CSS 属性。...弹性盒的特点： Flexbox 布局灵活。提供一种强大的方式来排列和对齐项目。提供一种正确间隔项目的方法。使用 flexbox，您可以轻松管理项目的顺序和顺序。...流行的 CSS 库 Bootstrap 基于 flexbox。如何使用 CSS flex-box 绘制布局？第 1 步：创建一个 flex container。...b) center: center 值将项目对齐在 flex 容器的中心 c) flex-end: flex-end 值与 flex-start 相反。它在弹性容器的末端对齐弹性项目。...b) flex-end flex-end 对齐容器底部的项目。 c) center 居中对齐容器中间的项目。 d) baseline 基线值根据它们的基线对齐弹性项目。

6.9K1 0

position-try-fallbacks

教育的胜利，可以压倒国民性。...*/ position-area: top; /* 默认在顶部对齐 */ position-try: bottom; /* 尝试从底部定位 */ width...*/ } } div class="tmp-container"> div class="anchor">anchordiv> div...class="target">targetdiv> div> /* 定义一个锚点元素 */ .anchor { anchor-name: --my-anchor...*/ position-area: top; /* 默认在顶部对齐 */ position-try: bottom; /* 尝试从底部定位 */ width

961 0

BootStrap应用开发学习入门1

#两端对齐的导航 (在屏幕宽度大于 768px 时，通过在分别使用 .nav、.nav-tabs 或 .nav、.nav-pills 的同时使用它，让标签式或胶囊式导航菜单与父元素等宽。)...(left / center / right ) 向左或向右对齐导航栏中的导航链接、表单、按钮或文本这些组件 .navbar-btn #导航栏中的按钮向不在中的 <button...徽章（Badges）描述:徽章与标签相似，主要的区别在于徽章的边角更加圆滑,主要用于突出显示新的或未读的项, 添加到链接、Bootstrap 导航等这些元素上即可...（Button）描述:添加进一些交互，比如控制按钮状态，或者为其他组件（如工具栏）创建按钮组。...#加载状态 data-toggle="button" #单个切换 data-toggle="buttons" #添加复选框组的切换、单选按钮（Radio） (

44.8K2 1

Jump Start Bootstrap 第3章

Bootstrap 官网地址原文出处在这一章，我们将开始使用Bootstrap的一些非常有用的HTML组件。诸如按钮、标题(headers)、导航菜单和评论系统的组件经常被用在网站上。... 我们现在将一组4>和元素放在每个列表项中来代替单纯的文本。...让我们开始创建第一个导航组件： Navs Navs是一组排成一行用来导航的链接；我们把这组链接呈现成标签或者按钮，在Bootstrap中,它们被称为pills。...Navbar（导航条） Navbar是最有趣的Bootstrap组件；但对于新手，不容易掌握；它带来了很多挑战，比如将头部和其余部分保持一致；正确地对齐链接、搜索栏和导航栏中的下拉菜单会使工作变得更加困难...这些类用于将链接正确地与导航条对齐: div class="navbar navbar-default"> div class="container-fluid"> div

13.9K2 0

移动端全兼容的flexbox速成班

业界与flexbox的相关教程文章也是各式各样，新旧交替，很多小伙伴对flexbox想用又不敢用，究其原因也就是即分不清它各个版本的编写规范，又苦恼于大家总是挂在嘴边的一句“flexbox兼容性不好”。...”其实包含“父元素”，“子元素”2个部分，将“父元素”定义为一个flexbox，则在”父元素”里的“子元素们”就被赋予了可以自由伸缩的能力。...，就可以完成顶部对齐，居中对齐或是底部对齐的切换，简单方便值得拥有。...但是导航变成单按钮布局的时候，会导致标题栏的位位移，不是特别的推荐。...; 将“沿着主轴对齐方式+沿着侧轴对齐的方式”设置为居中，无论子元素是什么形态，都可以随时随地的“水平垂直居中”了。

1.7K9 0

BootStrap应用开发学习入门1

#两端对齐的导航 (在屏幕宽度大于 768px 时，通过在分别使用 .nav、.nav-tabs 或 .nav、.nav-pills 的同时使用它，让标签式或胶囊式导航菜单与父元素等宽。)...(left / center / right ) 向左或向右对齐导航栏中的导航链接、表单、按钮或文本这些组件 .navbar-btn #导航栏中的按钮向不在中的 <button...徽章（Badges）描述:徽章与标签相似，主要的区别在于徽章的边角更加圆滑,主要用于突出显示新的或未读的项, 添加到链接、Bootstrap 导航等这些元素上即可...（Button）描述:添加进一些交互，比如控制按钮状态，或者为其他组件（如工具栏）创建按钮组。...#加载状态 data-toggle="button" #单个切换 data-toggle="buttons" #添加复选框组的切换、单选按钮（Radio） (

44.3K3 0

移动端全兼容的flexbox速成班 - 腾讯ISUX

业界与flexbox的相关教程文章也是各式各样，新旧交替，很多小伙伴对flexbox想用又不敢用，究其原因也就是即分不清它各个版本的编写规范，又苦恼于大家总是挂在嘴边的一句“flexbox兼容性不好”。...”其实包含“父元素”，“子元素”2个部分，将“父元素”定义为一个flexbox，则在”父元素”里的“子元素们”就被赋予了可以自由伸缩的能力。...一句属性设置，就可以完成顶部对齐，居中对齐或是底部对齐的切换，简单方便值得拥有。...但是导航变成单按钮布局的时候，会导致标题栏的位位移，不是特别的推荐。 ?...; 将“沿着主轴对齐方式+沿着侧轴对齐的方式”设置为居中，无论子元素是什么形态，都可以随时随地的“水平垂直居中”了。

1.3K3 0

CSS Flexbox 可视化手册

弹性项目当 display: flex应用于 .containerdiv 时，所有直接子div都变为 flex-items，并获得新的行为它们将显示在同一行中，因为flex-direction默认为...默认情况下所有的弹性项目都设置为 order: 0，这意味着所有项目都属于同一组，并且它们将按照原始顺序定位。在两个或多个组的情况下，组会相对于它们的整数值进行排序。...在Flexbox中，沿着轴的项目对齐和空间分布可以受到四个属性的控制： justify-content: 对齐主轴中的所有项目 align-items: 对齐交叉轴中的所有项目 align-self:...它接受与align-items和'auto'相同的值。 auto选项通过 align-items将 align-self重置为容器全局定义的值。...下一个动图展示了把项目1设置为flex-shrink:10，项目4设置为flex-grow:10。对于负自由空间，项目1的宽度减少10倍。对于正空闲空间，第4项的宽度是其他空间的10倍。 ?

3.1K2 0

BootStrap 前端框架简介

使用行样式row来创建水平的列组。内容需要放置在列中，并且只有列可以是行的直接子节点。预定义的类如 .row 和 .col-sm-4 可用于快速制作网格布局。...Bootstrap 3 和 Bootstrap 4 最大的区别在于 Bootstrap 4 现在使用 flexbox（弹性盒子）而不是浮动。...Flexbox 的一大优势是，没有指定宽度的网格列将自动设置为等宽与等高列。...列组合 row/col-md-4 col-md-8等测试列偏移 col-md-offset-4,原理 margin-left 列嵌套 div class='row'>div代码嵌套代码div..."> 移动 div> div> div> 3.2导航元素本章我们将讲解 Bootstrap 提供的用于定义导航元素的一些选项

1651 0

CSS实现前端布局更巧妙的方案！在 flex 布局中通过使用 margin 实现水平垂直居中以及其他常见的前端布局

space-between：第一个元素与容器起点对齐，最后一个元素与容器终点对齐，其他元素之间均匀分布空间。...示例 4: 水平左对齐 + 垂直底部对齐 div class="container example-4"> div class="box">1div> div class="box...在传统布局中，margin: auto; 主要用于水平居中对齐，不适用于垂直居中。因为普通流布局的垂直方向是由文档流控制的，不支持类似 Flexbox 中的自动调整行为。...它不仅可以处理水平居中，还可以在 Flexbox 布局下根据剩余空间自动调整外边距，实现完全的居中对齐。...在适当的情况下直接使用 margin 进行布局是一种更优雅、简洁的替代方案，可以在 Flexbox 布局中有效地实现居中对齐和一些复杂的布局需求。

1681 0

Bootstrap实用手册

Bootstrap 组件－按钮组.btn-group (1). 基本按钮 ? (2). 将一组 .btn-group 组合进一个 .btn-toolbar(按钮工具栏) ? (3)....按钮组尺寸，为 .btn-group 增加 .btn-group-* 类设置尺寸 ①. div class="btn-group btn-group-lg">div> ②....按钮组的嵌套，在一个 btn-group 中嵌套另一个 btn-group (5). 两端对齐按钮组，.btn-group .btn-group-justified (6)....Bootstrap 组件－警告框.alert，允许将任意字符与可选的关闭按钮组合在一起的结构 (1). .alert-success/danger/info/warning 成功/危险/信息/警告...Bootstrap 组件－巨幕.jumbotron，如果想让巨幕组件的宽度与浏览器宽度一致并且没有圆角，请把此组件放在所有 .container 元素的外面，并在

6K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭