Bootstrap4,:after,display: flex;

这个业务逻辑多少都有点奇怪了，阅读浏览次数增值在新闻详情页的控制器方法里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

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

不知道这算什么问题，权当记录一下。

抄了别人一段代码，效果不一样，背景图片不显示，经比对发现是Bootstrap4的.row里面多了display: flex;的问题。

原代码：

<style>
.index-top-bg{position:relative;overflow:hidden;}
.index-top-bg:after {
	content: " ";
	position: absolute;
	width: 100%;
	height: 100%;
	background-image: url(https://icss.me/wp-content/uploads/2018/12/topbg.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	-webkit-animation: 20s zoom-in linear infinite;
	animation: 20s zoom-in linear infinite;
	z-index: -2;
	left: 0;
}
@-webkit-keyframes zoom-in {
 0%,100% {
  -webkit-transform:scale(1);
  transform:scale(1)
 }
 50% {
  -webkit-transform:scale(1.05);
  transform:scale(1.05)
 }
}
@keyframes zoom-in {
 0%,100% {
  -webkit-transform:scale(1);
  transform:scale(1)
 }
 50% {
  -webkit-transform:scale(1.05);
  transform:scale(1.05)
 }
}
</style>
<div class="container-fluid topimage head-animation">
		<div class="row">
		<div class="page-top index-top-bg">
				<div class="page-top-info">
				<div class="page-top-title">友情链接</div>
				<div class="page-top-view">浏览 | 3545</div>
			</div>
			</div>
	</div>
	</div>

Bootstrap4中.row

.row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

然后背景图片就不显示，文字显示也不正常，如果把display: -ms-flexbox; display: flex;删了，就可以正常显示了。

或者直接把container-fluid和<div class="row"></div>删了，就可以

赏

前一篇

Bootstrap4滚动监听实例

后一篇

bootstrap4 输入框选中状态阴影如何去除

相关推荐

Bootstrap4中popper.min.js的作用

Bootstrap4 | 2020-05-27 14031

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 8501

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