商汇粹外网资源平台

搜索
查看: 2387|回复: 5

bootstrap栅格系统的div高度怎样定?

[复制链接]

该用户从未签到

9

主题

20

帖子

90

积分

注册会员

Rank: 2

积分
90
发表于 2022-10-6 12:17:35 | 显示全部楼层 |阅读模式
请问用bootstrap栅格系统写div时,高度应该怎样写呢?不能直接写px吧,不同设置分辨不同,div宽度始终是满屏的,如果高度指定像素大小,div就不能保证长宽比例恰当了。本人菜鸟,基础还很渣,望各位大神指教。
回复

使用道具 举报

该用户从未签到

0

主题

26

帖子

80

积分

注册会员

Rank: 2

积分
80
发表于 2022-10-6 12:35:55 | 显示全部楼层

@Luin

神那学来的。
height:0px;
padding-bottom:100%
回复

使用道具 举报

该用户从未签到

1

主题

17

帖子

53

积分

注册会员

Rank: 2

积分
53
发表于 2022-10-6 12:54:15 | 显示全部楼层
这真是一个奇怪的需求。
要让元素按完全比例缩放,想想就复杂。
高度可以根据与宽度的比例,来用js控制,那么padding、margin、font-size如何也按比例缩放呢?
一般来说,高度都是用元素内容以及padding来撑开的,所以不太需要指定高度。
回复

使用道具 举报

该用户从未签到

5

主题

37

帖子

145

积分

注册会员

Rank: 2

积分
145
发表于 2022-10-6 13:12:35 | 显示全部楼层
尽量不限制高度,如果需要保证宽高比,
@huiter

的答案是可以实现的。
回复

使用道具 举报

该用户从未签到

5

主题

41

帖子

141

积分

注册会员

Rank: 2

积分
141
发表于 2022-10-6 13:30:55 | 显示全部楼层
自己刚好也碰到这个需求了,做响应式布局的时候,当图片完全加载之前想把高度给固定。百思不得其解,都打算让js出马了。
后来看了下手淘的布局
img外层的a标签的样式
padding: 50% 0;
height: 0;
完美的撑起一个固定的高度。
和楼上有人回答的padding-bottom:100%;原理一样;
回复

使用道具 举报

该用户从未签到

10

主题

128

帖子

398

积分

中级会员

Rank: 3Rank: 3

积分
398
发表于 2022-10-6 13:49:15 | 显示全部楼层
呵呵,今天学习,刚好遇到这个问题。
我需要做的是 一列中的是一个绿色背景(绿色背景中心有文字),另一侧用的是一张400*400px大小的图片。
随着屏幕缩放,图片变大(或变小)但是背景不会变(一开始写死了高度)
-------------------------------
为了解决这个问题,目前我找到一个比较low的办法。切图1px*1px 绿色gif小图片。<img width="100%" />就可以搞定这个问题。因为我绿色背景里面要加文字,所以我外部又套了一个div,然后加文字就搞定了。
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表