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

使用flex在bootstrap 4中浮动2个div

在Bootstrap 4中使用Flex布局可以实现浮动两个div。Flex布局是一种强大的CSS布局模型,可以轻松实现灵活的页面布局。

首先,确保你已经引入了Bootstrap 4的CSS文件和相关的JavaScript文件。

接下来,创建一个包含两个div的父容器,并为其添加d-flex类,以启用Flex布局。例如:

代码语言:txt
复制
<div class="d-flex">
  <div class="div1">Div 1</div>
  <div class="div2">Div 2</div>
</div>

然后,为每个div添加相应的类来定义其样式和行为。例如,可以使用flex-grow-1类使两个div平分父容器的宽度,并使用mr-2类为第一个div添加右边距。示例代码如下:

代码语言:txt
复制
<div class="d-flex">
  <div class="div1 flex-grow-1 mr-2">Div 1</div>
  <div class="div2 flex-grow-1">Div 2</div>
</div>

在上述代码中,flex-grow-1类使两个div平分父容器的宽度,mr-2类为第一个div添加了2个单位的右边距。

最后,你可以根据需要自定义每个div的样式和内容。

这种使用Flex布局的方式可以实现在Bootstrap 4中浮动两个div,并且具有响应式的特性。如果你想了解更多关于Flex布局的信息,可以参考腾讯云的相关文档和示例代码:

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

相关·内容

清除浮动的几种方法

Css对于浮动的定义:使元素脱离了文档流,按照指定方向移动,直到碰到包含框或另一个浮动框为止。 本人现在虽然已经不用浮动了,都用弹性布局flex,但是不可否认,浮动弹性布局出现之前使用最多的。...这种方法会给页面增加很多无用的标签,但是如果你一个div之后又是一个div,然后内容是写在下一个div里面,那么给这个div添加还是可行的。...6、使用 因为br自带clear属性,所以使用它可以解决浮动。这跟添加空标签一样,多了很多无用标签,也不推荐。...7、after伪类清除 这是最推荐的方法了,如果有用过bootstrap的可以看一下他们也是使用的clearfix类就是用的这个方法。注意此方法IE6、IE7下不兼容。...9、设置display: table 我是觉得跟flex有点类似了,不推荐使用,因为不知道会不会有其他问题。

2K40
  • 分享 16 个常用的自定义表单组件样式代码片段(上)

    flex-direction: row; justify-content: center; } 2、Chip(标签) 带叉号的标签,我们也会常用到,一些博客内容网站比较常见,点击对应的标签就会看到相关的列表内容...) 浮动标签纸片输入框(Floating Label Paper Input)是一个具有浮动标签的表单元素组件,包括Material风格文本框、选择框和输入掩码,支持错误消息处理。.../* Hide it by default */ opacity: 0; transition: all 200ms; } 6、Input addon(带图标的输入框) 类似BootStrap... CSS部分 .container { display: flex; /* Take full size */ width: 100%; } .container...单选按钮组) 很早以前的 IOS 版本有这样单选按钮组,用来切换和显示页面,示例如下图所示: 这里我们使用 radio 组件实现上述效果,示例代码如下: HTML部分 <div class="stv-radio-buttons-wrapper

    1.8K50

    寒假提升 | Day10 CSS 第八部分

    使用clear属性 CSS属性 - clear clear属性是做什么的呢?...clear 属性可以指定一个元素是否必须移动(清除浮动后)到它之前的浮动元素下面; clear的常用取值 left:要求元素的顶部低于之前生成的所有左浮动元素的底部 right:要求元素的顶部低于之前生成的所有右浮动元素的底部...; PC端也几乎已经完全普及和使用, 只有非常少数的网站依然在用浮动来布局; 为什么需要flex布局呢?...于是世界就明亮了起来. flexbox使用时, 我们最担心的是它的兼容性问题: 我们可以caniuse上查询到具体的兼容性 2.2. flex布局重要的概念 两个重要的概念: 开启了 flex 布局的元素叫...align-items 决定了 flex items cross axis 上的对齐方式 normal:弹性布局中,效果和stretch一样 stretch:当 flex items cross

    1.2K20

    前端系列第4集-解释下浮动和它的工作原理,清除浮动的方法

    清除浮动有多种方法,其中比较常见的两种是: 使用clear属性:浮动元素的下方添加一个空元素,并给这个元素设置clear属性。...例如:   浮动元素 使用after伪元素:浮动元素的容器元素上添加一个...;">浮动元素2   浮动元素3 使用BFC(块级格式化上下文):父元素上触发BFC可以清除浮动,具体方式有多种... grid-column-end: 4;">浮动元素3 使用flex布局:将父元素设置为display:flex,子元素再设置float:left等浮动属性。...还有一种比较特殊的情况,即使用flexbox布局时,浮动元素会自动清除。这是因为flex容器中,子元素会默认设置为flex-item,而不是常规文档流中的block元素。

    37920

    CSS 零基础到实战(05)布局、盒子模型、弹性盒子【前端就业课 第二阶段】

    浮动为左浮动;接着查看 body 中的 html 内容,首先是一个常规的 div,接着是两个使用了 float 样式的 div,其中一个背景色为绿色,使用 margin-top 表示距离顶部的距离为...若此时将浮动更改与右边那么使其元素浮动于右侧: 结果如下: 浮动会使div 脱离文档流,之后若再加上div,将会收到之前浮动的影响使其重叠: 结果如下,黑色的div 浮动的酒红色...div 之下,这是因为发生了重叠: 我们可以使用样式 clear:both; 清除浮动重新进行布局: 效果如下: 二、盒子模型 在网页中,我们将所有元素都看成是一个盒子,那么这就是盒子模型...三、弹性盒子 弹性盒子是为了原有布局上增加更大的灵活性,弹性布局使用属性 display 设置,其值为 flex。...flex-shrink 与 flex-basis flex 子元素中设置宽度可使用 flex-basls,使用 flex-basls 的优先级比 width 高,即时同时使用 width 以及 flex-basis

    79820

    BootStrap基础知识

    2019年实习时的 BootStrap(4.x)基础知识 备份 BootStrap5六角学院文档: HexSchool 顺便推荐一个程序员段子网站 techug.com 栅格系统 栅格类 例:<div...d-flex 类创建一个弹性盒子容器 d-inline-flex 创建显示同一行上的弹性盒子容器可以使用 flex-row 可以设置弹性子元素水平显示(预设) flex-row-reverse 类用于设置右对齐显示...Jumbotron 里头可以放一些 HTML标签,也可以是 Bootstrap 的元素。 可以通过 元素 中添加 .jumbotron 类来创建 jumbotron。... Bootstrap 中的读取图示是用 rem, currentColor 和 display: inline-flex。...float-left 设置元素左浮动 clearfix 用于清除浮动 mx-auto 设置居中对齐 my-auto 上下margin m-* .p-* 四周margin/padding w-* (.w

    28410

    HTML & CSS页面布局之定位

    div{ float:left;/*规定元素向左浮动*/ /*float:right;规定元素向右浮动*/ } 请注意,浮动float属性没有center取值,并且,如果设置了浮动属性,那么你将不能通过使用...当有多个元素浮动时,他们有以下特点: a) 相同方向上浮动的元素,先浮动的元素会显示在前面。...son2则父元素的右侧显示,紧贴父元素上*/ c) 如果有未浮动的兄弟元素,那么元素浮动之后,会根据它在标准流中的位置确定该在第几行展示。...绝对定位一般和相对定位配合使用,父元素设置相对定位,但不设置偏移量(默认为0),子元素设置绝对定位,这样就可以把子元素的偏移控制父元素之内。...,需要注意的是,使用浮动需要把center区域放到left和right之后,原因请往上看浮动的第三个特征*/ 4,flex布局 HTML部分同calc()。

    5.5K10

    第213天:12个HTML和CSS必须知道的重点难点问题

    使用Flex 只需要在父盒子设置:display: flex; justify-content: center;align-items: center; 使用 CSS3 transform 父盒子设置:...(不推荐使用) 方法二:使用空元素,如 (.clear{clear:both}) 原理:添加一对空的DIV标签,利用css的clear:both属性清除浮动...(不推荐使用) 方法三:让父级div 也一并浮起来 这样做可以初步解决当前的浮动问题。但是也让父级浮动起来了,又会产生新的浮动问题。...IE6中还需要触发 hasLayout(zoom:1) 优点:代码简介,不存在结构和语义化问题 缺点:无法显示需要溢出的元素(亦不太推荐使用) 方法六:父级div定义 伪类:after 和 zoom...bootstrap 来完成一部分工作,当然也 可以自己写响应式。

    2.3K20

    CSS&HTML面经专题——(三)CSS定位盒模型经典布局浮动布局与BFC

    align-items伸缩容器上使用它,伸缩容器内部所有的元素都一致地受制于align-items的值。...但是有些时候,我们希望伸缩容器内部某个元素侧轴上的排列方式有所差异。此时就不能使用align-items,因为align-items作用于整体。 我们希望作用于部分。...="left"> 复制代码 (2) 使用CALC (不推荐使用...,兼容到IE9,一般来说禁止css里使用表达式去算,因为渲染的很慢,影响性能,所以css里这种运算表达式尽量少写) .center { width: calc(100%-400px); min-height...但它与inline-block还是有一些区别的,第一个就是关于横向排序的时候,float可以设置方向而inline-block方向是固定的;还有一个就是inline-block使用时,有时会有空白间隙的问题

    2K31

    使用flex弹性布局来为微信小程序写自适应页面

    ,比如垂直居中比较费劲,比如著名的float坍塌问题,另外有些极端情况下,还得使用模型+clear:both来手动清除浮动,比较麻烦。    ...目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能,本人在微信小程序页面中尝试了一下弹性布局,个人感觉是:简直太好用了。     ...也就是说浮动布局和弹性布局不可共存,二者必居其一。     其实flex布局原理很简单,采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。....box { flex-flow: || ; } justify-content justify-content属性定义了项目主轴上的对齐方式...align-items属性定义项目交叉轴上如何对齐。

    1.1K20

    【融职培训】Web前端学习 第2章 网页重构15 flex布局

    如果不考虑浏览器兼容问题,那么flex布局大部分情况都可以很好地替代浮动布局。...;flex项目主轴居中展示 此前我们将一个元素居中显示,通常将设置元素设置为固定宽度,然后为其设置属性margin:0 auto;对于宽度不固定的元素,我们只能使用一些奇淫技巧让其居中。...;flex项目交叉轴开始位置展示 align-items:flex-end;flex项目交叉轴结束位置展示 align-items:flex-center;flex项目交叉轴居中展示 三、flex...:1; 14 } 15 .item2{ 16 flex:2; 17 } 18 .item3{ 19 flex:3; 20 } 四、课后练习 使用flex布局让一个宽高都为100px的div...使用flex布局完成融职教育首页顶部菜单。 使用flex布局完成融职教育移动端的底部菜单。

    48010

    Web前端学习 第2章 网页重构15 flex布局

    如果不考虑浏览器兼容问题,那么flex布局大部分情况都可以很好地替代浮动布局。...;flex项目主轴居中展示 此前我们将一个元素居中显示,通常将设置元素设置为固定宽度,然后为其设置属性margin:0 auto;对于宽度不固定的元素,我们只能使用一些奇淫技巧让其居中。...;flex项目交叉轴开始位置展示 align-items:flex-end;flex项目交叉轴结束位置展示 align-items:flex-center;flex项目交叉轴居中展示 三、flex...:1; 14 } 15 .item2{ 16 flex:2; 17 } 18 .item3{ 19 flex:3; 20 } 四、课后练习 使用flex布局让一个宽高都为100px的div...使用flex布局完成融职教育首页顶部菜单。 使用flex布局完成融职教育移动端的底部菜单。

    47620

    div 等块级标签横向排列的方法总结

    这也是我初学前端时最困扰的问题~ 以下面这组 div 为例,wrap 的高度由内容撑开 ? 平时是这样的,上下排列~ ? float 浮动 ? ?...成功横向排列了,但是有几个问题~ float 的特点: 多个 div浮动时,顺序会颠倒,请注意看 div2 和 div3,可以通过将它们再用一个 div 包起来,然后对它们设置左浮动,对父 div...这个空白其实是空白符,因为 inline-block 会使元素在行内排列,也就是跟文字在一起排列,而我们源代码中 divdiv 之间的空格、Tab、换行符浏览器里会被合并成一个空白符,所以就会出现缝隙...可以使用 rem 作为字体大小单位来继承 HTML 根元素的字体大小属性。 源代码里把前一个 div 的结束标签和后一个 div 的开始标签贴在一起。可读性极差,丑拒。 ?...flex 使用不再深入探讨,推荐阮一峰写的教程 Flex 布局教程:语法篇 定位,慎用 绝对定位,相对定位,根据实际需求选用,切忌滥用。 负的margin 见一个打死一个!!!

    3.2K20
    领券