Bootstrap4中利用弹性布局实现一侧宽度固定，一侧宽度自适应

这个业务逻辑多少都有点奇怪了，阅读浏览次数增值在新闻详情页的控制器方法里setInc，这怎么还写进模型事件里了。如果非要用onAfterRead也可以，把新闻文章的内容单独分出来一个news_content表，然后把它和news做关联，然后给news_content表的onAfterRead事件做增值处理，这样点进新闻页内查询到文章内容时才会触发它。: 评 TP6模型事件-查询后onAfterRead不好用

文章标签更多

ThinkPHP (254)

Mysql (58)

DedeCms (33)

jQuery (67)

证件照 (1)

尺寸大小 (2)

背景颜色 (1)

setInc (4)

setDec (4)

onclick (5)

友情链接更多

超纯水设备

免费设计

海报设计

快递查询

Bootstrap4 flex弹性布局

打开边栏(ESC) 关闭边栏(ESC)

flex:1和flex:auto详解
首先明确一点是， flex 是 flex-grow、flex-shrink、flex-basis的缩写。
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

实现一侧固定宽度，一侧自适应，使用flex:1;实现，发现左侧无论多少内容，右侧宽度都是固定的，没有被挤压

代码：

<div class="d-flex bg-light">
			<div class="p-2 bg-secondary border" style="flex:1;">style="flex:1;"</div>
			<div class="p-2 bg-secondary border" style="width:200px;">style="width:200px;"</div>
		</div>
		<div class="d-flex bg-light">
			<div class="p-2 bg-secondary border" style="flex:1;">style="flex:1; "style="flex:1;"style="flex:1;"style="flex:1;"style="flex:1;"style="f lex:1;"style="flex:1;"style="flex:1;"style="flex:1;"style="flex:1;"style="fle x:1;"style="flex:1;"style="flex:1;"</div>
			<div class="p-2 bg-secondary border" style="width:200px;">style="width:200px;"</div>
		</div>

效果：

from clipboard

flex-grow:0;flex-shrink;1;flex-basis:auto;缺一不可，如果没有flex-basis:auto;

效果：

from clipboard

利用Bootstrap已封装的css实现，发现实现不了，

利用class="flex-grow-0 flex-shrink-1" style="flex-basis:auto;"组合也实现不了

赏

前一篇

Bootstrap4面包屑导航breadcrumb右侧添加元...

后一篇

bootstrap4导航无法点击菜单链接问题

相关推荐

Bootstrap4中popper.min.js的作用

Bootstrap4 | 2020-05-27 12267

popper.min.js 用于设置弹窗、提示、下拉菜单，是第三方插件，目前 bootstrap.bundle.min.js 已经包含了 popper.min.js。 <script src="bootstrap-4.4.1/js/popper.min.js" ></script> <script s...

Bootstrap4 .ml-auto元素居右.mr-auto元素居左

Bootstrap4 | 2019-11-25 7303

Bootstrap4 导航栏元素居右 Bootstrap 4正解： .ml-auto元素居右 .mr-auto元素居左