前端小白请教一下bootstrap高度自适应问题 5C

bootstrap元素的宽度可以通过col-xx-xx自适应,那高度自适应一般是怎么做的呢?

4个回答

一句话height:100vh,vh是当前的显示器的高度,100%首先你要定义你html,body,或者外面dom的高度,不然下辈子都是凉凉的。class="col-md-4" 这个是宽度的12分之4

Sineiwb
Sineiwb 困扰了好久的问题,居然在这儿解决了,必须赞一个,感谢……
一年多之前 回复

bootstrap好久不用了,我记得好像是格栅布局吧;通过控制一行有几个格子来自适应宽度;那么肯定有一列有几个格子来控制高度的吧;

height: 100%

因为是滚动的 只要宽度自适应 那个高度就会相对应的缩放,所以没有高度自适应
设置 height: 100% 就可以了

举个例子 col-md-4 3行占满屏幕宽度,当其中一个栅格里的元素占据很高的时候 那个其他俩格就会撑开,所以一般越高的内容
它的栅格就会越宽

<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
bootstrap table 自适应内容宽度

我的表格只有3列,但是bootstrap table默认撑满了整个页面,请问怎么设置 表格宽度自适应 内容宽度?

bootstrap在iframe下自适应问题

系统开发时,使用IP地址调试。bootstrap开发的程序可以在手机、IPAD、电脑上正常使用。但是用户的域名解析后,使用网址而不是IP地址时,bootstrap无法根据手机、IPAD自动适应了。查看了下网页源代码,用户的域名解析不是直接把网址解析到IP,而是出现了以下代码: <iframe style="width: 100%; height:100%;" frameborder="0" src="http://IP地址"></iframe> 也就是说:域名解析把原来的IP地址放到了iframe中。 请问,现在这样,如何处理,让bootstrap能够根据手机、IPAD、电脑自动适应?

bootstrap 加自适应 没有效果

<meta. ...>. 怎么解决自适应问题 <meta. ...>. 怎么解决自适应问题

bootstrap如何实现高度随屏幕大小动态变化

使用bootstrap把页面中的一个div设置成了自适应的( ``` <div class="col-** col-**..."> ``` )。然后想让这个div模块的高度随宽度按比例变化,达到“height=width*x”的效果,应该怎么实现呢?

使用bootstrap如何制作导航栏自适应后连接变成按钮菜单?

我用bootstrap框架做了一个导航栏,但自适应后很难看,我想浏览器窗口变小后, 导航栏能自适应,连接那些变成汉堡菜单,我应该怎么做?上网找插件?还是bootstrap 自带这种用法?

css的background属性在bootstrap中的自适应

section .floor1{ background:url('../images/video_bg.jpg') no-repeat; height:100%; background-size:100% 100%; position:absolute; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/video_bg.jpg',sizingMethod='scale'); } 这种情况下的width可以自适应100%,可是他的高会变的很小 写上width:100%之后会变得很宽超出界限,高也并比图片的高小, 是因为什么原因会造成这种情况呢? 希望各位大神帮帮忙

Bootstrap水平排列的表单外层宽度变小 label标签就无法在一行显示了!

1.Bootstrap水平排列的表单外层宽度变小 label标签就无法在一行显示了! 2.500px会错乱 ![图片说明](https://img-ask.csdn.net/upload/201903/07/1551951333_15304.png) 3.之所以要减小外层宽度主要是空白留太多了(这是800px的情况)。 ![图片说明](https://img-ask.csdn.net/upload/201903/07/1551951113_739625.png) 4.希望能再宽度减小到500px也能有这种效果 ,该怎么办呢,如果自己写元素就无法用到bootstrap的自适应了啊。 5.部分代码![图片说明](https://img-ask.csdn.net/upload/201903/07/1551951198_174819.png) 求大神赐教!

前端小白,求问有关bootstrap的模态框的问题

前端小白请问bootstrap的模态框如何弹出? 我把触发模态框的按钮写在了导航栏上.模态框无法弹出(弹出一瞬间自动关闭).把按钮写在body里面就没事了. 我觉得父子元素的原因? 如何解决呢?

bootstrap background如何自适应,如下写的不行

<div class="container-fluid"> <div class="row-fluid" style="width:1380px; height:500px;background: #F5F5F5; margin-left: -33px; "> <div class="span12"> </div> </div> </div>

bootstrap垂直滚动问题

用boostrap实现,采用append方法向body里面的table添加数据, 当table数据很多的时候,怎么实现让页面内容垂直滚动,但页面布局不变 (手机端显示)

关于前端bootstrap的问题

![图片说明](https://img-ask.csdn.net/upload/201611/21/1479713576_66522.png) # 这个如何实现啊!!!!!!!

怎么让几个盒子排序变成自适应?急急急!

[图片说明](https://img-ask.csdn.net/upload/201609/23/1474598715_821864.png)87.png)

请教bootstrap-select问题

我在html里面使用bootstrap-select 在本页面显示正常,点击也能显示下拉数据,但是当我在另一个页面使用jquery的load方法局部刷新这个页面的时候,就显示不出来了,网上查了资料说$('.selectpicker').selectpicker('refresh')一下,这下可以显示出来了,但是无法点击下拉框![图片说明](https://img-ask.csdn.net/upload/201711/30/1512029776_782224.jpg),火狐的控制台报这个错误

iframe框架自适应的问题

有个页面a.html,现在新建了一个b.html,并在b里将a框架起来。但是被框架后无法在手机浏览器上自适应。 代码如下,请求支援! ``` <iframe id="frame3d" name="frame3d" frameborder="0" width="100%" scrolling="auto" style="margin-top: -4px;" onload="this.style.height=document.body.clientHeight+4" height="100%" src="http://apis.map.qq.com/tools/poimarker?type=1&keyword=修车&center=CurrentLocation&transport=2&trafficbutton=1&topbar=0&radius=1000&key=GMYBZ-YPQHP-OMEDT-VBYMT-5TU57-KTFUS&referer=附近汽修店" mce_src="map.jsp"></iframe> ```

bootstrap怎么设置栅格竖直方向上的高度?

![图片说明](https://img-ask.csdn.net/upload/202004/04/1585963030_414680.png) +++ ![图片说明](https://img-ask.csdn.net/upload/202004/04/1585963258_798541.png) +++ ![图片说明](https://img-ask.csdn.net/upload/202004/04/1585963266_370254.png) +++ 1、如图,刚接触bootstrap,按教程配置好了左右方向上的比例,现在想让这四行栅格按我给的比例适应整个页面,请问要怎么实现呢? 2、浏览器底部有个左右方向的滚动条,正常来说是没有的,请问有没有办法去掉?

求救前端大神关于bootstrap问题

将项目部署到linu后出现了一个很奇怪的现象:bootstrap样式文件可以被浏览器加载,但是不能被自动渲染,在本地调试时样式完全正常。 更诡异的是,当我在浏览器控制台调试bootstrap样式文件时,例如直接在bootstrap文件里面加多一个空格或者换行什么的,浏览器自动渲染后样式又有效了!所以估计应该是浏览器在一开始加载了bootstrap样式文件,但是没有自动渲染,求问大神这是怎么回事,拜谢了!

bootstrap可以不做移动端吗?

用bootstrap框架开发个人博客可以吗,可以不用这个做移动端吗,有什么和bootstrap搭配好的移动端框架吗?求教

bootstrapTable怎么适配手机端

![图片说明](https://img-ask.csdn.net/upload/201908/13/1565685759_909773.png)![图片说明](https://img-ask.csdn.net/upload/201908/13/1565685767_854124.png) 手机端显示是 ![图片说明](https://img-ask.csdn.net/upload/201908/13/1565685789_321558.png) pc端显示 ![图片说明](https://img-ask.csdn.net/upload/201908/13/1565685817_57003.png) 现在是要把手机的表格显示和pc端显示的一样

上班一个月,后悔当初着急入职的选择了

最近有个老铁,告诉我说,上班一个月,后悔当初着急入职现在公司了。他之前在美图做手机研发,今年美图那边今年也有一波组织优化调整,他是其中一个,在协商离职后,当时捉急找工作上班,因为有房贷供着,不能没有收入来源。所以匆忙选了一家公司,实际上是一个大型外包公司,主要派遣给其他手机厂商做外包项目。**当时承诺待遇还不错,所以就立马入职去上班了。但是后面入职后,发现薪酬待遇这块并不是HR所说那样,那个HR自...

副业收入是我做程序媛的3倍,工作外的B面人生是怎样的?

提到“程序员”,多数人脑海里首先想到的大约是:为人木讷、薪水超高、工作枯燥…… 然而,当离开工作岗位,撕去层层标签,脱下“程序员”这身外套,有的人生动又有趣,马上展现出了完全不同的A/B面人生! 不论是简单的爱好,还是正经的副业,他们都干得同样出色。偶尔,还能和程序员的特质结合,产生奇妙的“化学反应”。 @Charlotte:平日素颜示人,周末美妆博主 大家都以为程序媛也个个不修边幅,但我们也许...

MySQL数据库面试题(2020最新版)

文章目录数据库基础知识为什么要使用数据库什么是SQL?什么是MySQL?数据库三大范式是什么mysql有关权限的表都有哪几个MySQL的binlog有有几种录入格式?分别有什么区别?数据类型mysql有哪些数据类型引擎MySQL存储引擎MyISAM与InnoDB区别MyISAM索引与InnoDB索引的区别?InnoDB引擎的4大特性存储引擎选择索引什么是索引?索引有哪些优缺点?索引使用场景(重点)...

我说我不会算法,阿里把我挂了。

不说了,字节跳动也反手把我挂了。

抖音上很火的时钟效果

反正,我的抖音没人看,别人都有几十万个赞什么的。 发到CSDN上来,大家交流下~ 主要用到原生态的 JS+CSS3。 具体不解释了,看注释: &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/tit...

记录下入职中软一个月(外包华为)

我在年前从上一家公司离职,没想到过年期间疫情爆发,我也被困在家里,在家呆着的日子让人很焦躁,于是我疯狂的投简历,看面试题,希望可以进大公司去看看。 我也有幸面试了我觉得还挺大的公司的(虽然不是bat之类的大厂,但是作为一名二本计算机专业刚毕业的大学生bat那些大厂我连投简历的勇气都没有),最后选择了中软,我知道这是一家外包公司,待遇各方面甚至不如我的上一家公司,但是对我而言这可是外包华为,能...

为什么程序员做外包会被瞧不起?

二哥,有个事想询问下您的意见,您觉得应届生值得去外包吗?公司虽然挺大的,中xx,但待遇感觉挺低,马上要报到,挺纠结的。

手机经常收到"回复TD退订",回还是不回?今天总算是弄清楚了

自从有了微信和QQ,手机短信几乎很少再用了,但是我们手机里面还是经常会收到"回复TD退订"的消息,那到底要不要回复呢?今天就来告诉大家! 信息内容可能包括 推销信息 品牌活动日的时候,会根据你的用户浏览信息,或者购买记录,后续发送一些降价消息。 但是笔者想说我是缺那10块钱的人嘛,我缺的是1000块。 垃圾信息 虽然我们已经不经常用短信功能,但是还是有不少...

当HR压你价,说你只值7K,你该怎么回答?

当HR压你价,说你只值7K时,你可以流畅地回答,记住,是流畅,不能犹豫。 礼貌地说:“7K是吗?了解了。嗯~其实我对贵司的面试官印象很好。只不过,现在我的手头上已经有一份11K的offer。来面试,主要也是自己对贵司挺有兴趣的,所以过来看看……”(未完) 这段话主要是陪HR互诈的同时,从公司兴趣,公司职员印象上,都给予对方正面的肯定,既能提升HR的好感度,又能让谈判气氛融洽,为后面的发挥留足空间。...

面试官问我:如何加载100M的图片却不撑爆内存

还记得当年面试一个面试官问我怎么加载巨图才能不撑爆内存,我没回答上来,他说分片显示,我寻思特么分片能减少内存使用??现在可以打他脸了! 内容扩展 1.图片的三级缓存中,图片加载到内存中,如果内存快爆了,会发生什么?怎么处理? 2.内存中如果加载一张 500*500 的 png 高清图片.应该是占用多少的内存? 3.Bitmap 如何处理大图,如一张 30M 的大图,如何预防 OOM? A...

面试阿里p7,被按在地上摩擦,鬼知道我经历了什么?

面试阿里p7被问到的问题(当时我只知道第一个):@Conditional是做什么的?@Conditional多个条件是什么逻辑关系?条件判断在什么时候执...

又出事了?网站被攻击了?高中生?

北京时间2020年3月27日9点整,如往常一样来到公司,带开电脑,正准备打开Github网站看一会源代码,再开始手头的工作。哟吼,一直打不开,一直出现如下页面: 我想很多网友也尝到了甜头,各大技术群炸开了锅,据网友反馈有攻击者正在发起大规模的中间人挟持,京东和Github等网站等网站都受到了影响。 什么是中间中间人挟持呢? 简而言之,就是攻击者在数据网络传输的过程中,截获传输过程中的数据并篡改...

无代码时代来临,程序员如何保住饭碗?

编程语言层出不穷,从最初的机器语言到如今2500种以上的高级语言,程序员们大呼“学到头秃”。程序员一边面临编程语言不断推陈出新,一边面临由于许多代码已存在,程序员编写新应用程序时存在重复“搬砖”的现象。 无代码/低代码编程应运而生。无代码/低代码是一种创建应用的方法,它可以让开发者使用最少的编码知识来快速开发应用程序。开发者通过图形界面中,可视化建模来组装和配置应用程序。这样一来,开发者直...

培训班出来的人后来都怎么样了?(二)

接着上回说,培训班学习生涯结束了。后面每天就是无休止的背面试题,不是没有头脑的背,培训公司还是有方法的,现在回想当时背的面试题好像都用上了,也被问到了。回头找找面试题,当时都是打印下来天天看,天天背。 不理解呢也要背,面试造飞机,上班拧螺丝。班里的同学开始四处投简历面试了,很快就有面试成功的,刚开始一个,然后越来越多。不知道是什么原因,尝到胜利果实的童鞋,不满足于自己通过的公司,嫌薪水要少了,选择...

面试了一个 31 岁程序员,让我有所触动,30岁以上的程序员该何去何从?

最近面试了一个31岁8年经验的程序猿,让我有点感慨,大龄程序猿该何去何从。

6年开发经验女程序员,面试京东Java岗要求薪资28K

写在开头: 上周面试了一位女程序员,上午10::30来我们部门面试,2B哥接待了她.来看看她的简历: 个人简历 个人技能: ● 熟悉spring mvc 、spring、mybatis 等框架 ● 熟悉 redis 、rocketmq、dubbo、zookeeper、netty 、nginx、tomcat、mysql。 ● 阅读过juc 中的线程池、锁的源...

大三实习生,字节跳动面经分享,已拿Offer

说实话,自己的算法,我一个不会,太难了吧

程序员垃圾简历长什么样?

已经连续五年参加大厂校招、社招的技术面试工作,简历看的不下于万份 这篇文章会用实例告诉你,什么是差的程序员简历! 疫情快要结束了,各个公司也都开始春招了,作为即将红遍大江南北的新晋UP主,那当然要为小伙伴们做点事(手动狗头)。 就在公众号里公开征简历,义务帮大家看,并一一点评。《启舰:春招在即,义务帮大家看看简历吧》 一石激起千层浪,三天收到两百多封简历。 花光了两个星期的所有空闲时...

工作八年,月薪60K,裸辞两个月,投简历投到怀疑人生!

近日,有网友在某职场社交平台吐槽,自己裸辞两个月了,但是找工作却让自己的心态都要崩溃了,全部无果,不是已查看无回音,就是已查看不符合。 “工作八年,两年一跳,裸辞两个月了,之前月薪60K,最近找工作找的心态崩了!所有招聘工具都用了,全部无果,不是已查看无回音,就是已查看不符合。进头条,滴滴之类的大厂很难吗???!!!投简历投的开始怀疑人生了!希望 可以收到大厂offer” 先来看看网...

推荐9个能让你看一天的网站

分享的这9个保证另你意外的网站,每个都非常实用!非常干货!毫不客气的说,这些网站最少值10万块钱。 利用好这些网站,会让你各方面的技能都得到成长,不说让你走上人生巅峰,但对比现在的你,在眼界、学识、技能方面都有质的飞跃。 一、AIRPANO 传送门:https://www.airpano.com/360photo_list.php 这是一个可以躺在家里,就能环游世界的神奇网站。 世界那么大,绝大多...

大牛都会用的IDEA调试技巧!!!

导读 前天面试了一个985高校的实习生,问了他平时用什么开发工具,他想也没想的说IDEA,于是我抛砖引玉的问了一下IDEA的调试用过吧,你说说怎么设置断点...

都前后端分离了,咱就别做页面跳转了!统统 JSON 交互

文章目录1. 无状态登录1.1 什么是有状态1.2 什么是无状态1.3 如何实现无状态1.4 各自优缺点2. 登录交互2.1 前后端分离的数据交互2.2 登录成功2.3 登录失败3. 未认证处理方案4. 注销登录 这是本系列的第四篇,有小伙伴找不到之前文章,松哥给大家列一个索引出来: 挖一个大坑,Spring Security 开搞! 松哥手把手带你入门 Spring Security,别再问密...

月薪22K程序员,打卡迟到10次,收到工资短信一脸懵逼

每家公司为了保证公司员工每天的工作时间,一般都会采用上下班打卡的工作制度,这其实是一个很常见的是,本身也没有什么问题的。正所谓无规矩不成方圆,公司肯定是有公司的规矩,虽然每个员工都很不喜欢这些规矩来束缚我们,但是公司也只是为了能更好的管理员工。但是一家公司如果一成不变的使用打卡制度,而不会去变通管理,也真不一定是好事。 打卡制度特别对于销售部门来说,不但会让公司发展不起来,还很容易丢失员工。但如...

97年世界黑客编程大赛冠军作品(大小仅为16KB),惊艳世界的编程巨作

这是世界编程大赛第一名作品(97年Mekka ’97 4K Intro比赛)汇编语言所写。 整个文件只有4095个字节, 大小仅仅为16KB! 不仅实现了3D动画的效果!还有一段震撼人心的背景音乐!!! 内容无法以言语形容,实在太强大! 下面是代码,具体操作看最后! @echo off more +1 %~s0|debug e100 33 f6 bf 0 20 b5 10 f3 a5...

不要再到处使用 === 了

我们知道现在的开发人员都使用 === 来代替 ==,为什么呢?我在网上看到的大多数教程都认为,要预测 JavaScript 强制转换是如何工作这太复杂了,因此建议总是使用===。这些都...

什么是a站、b站、c站、d站、e站、f站、g站、h站、i站、j站、k站、l站、m站、n站?00后的世界我不懂!

A站 AcFun弹幕视频网,简称“A站”,成立于2007年6月,取意于Anime Comic Fun,是中国大陆第一家弹幕视频网站。A站以视频为载体,逐步发展出基于原生内容二次创作的完整生态,拥有高质量互动弹幕,是中国弹幕文化的发源地;拥有大量超粘性的用户群体,产生输出了金坷垃、鬼畜全明星、我的滑板鞋、小苹果等大量网络流行文化,也是中国二次元文化的发源地。 B站 全称“哔哩哔哩(bilibili...

十个摸鱼,哦,不对,是炫酷(可以玩一整天)的网站!!!

文章目录前言正文**1、Kaspersky Cyberthreat real-time map****2、Finding Home****3、Silk – Interactive Generative Art****4、Liquid Particles 3D****5、WINDOWS93****6、Staggering Beauty****7、Ostagram图片生成器网址****8、全历史网址*...

我真的错了,我被跳槽后的高薪冲昏了头脑...

国内疫情已接近尾声,疫情对生活各个方面造成的影响,就是一场真实的“蝴蝶效应”。“全球最大安全套制造商因疫情停产,已造成一亿个安全套缺口”“口罩印钞机,月入千万的暴富神话”“百程旅行...

终于,月薪过5万了!

来看几个问题想不想月薪超过5万?想不想进入公司架构组?想不想成为项目组的负责人?想不想成为spring的高手,超越99%的对手?那么本文内容是你必须要掌握的。本文主要详解bean的生命...

​能让德国人放弃现金支付​,也没谁了

在新冠疫情中,德国人越来越多地选择在超市,加油站或其他商店付款时使用非接触式付款方式。德国信贷协会Deutschen Kreditwirtschaft (DK) 的一位发言人告诉德国新...

大厂的 404 页面都长啥样?最后一个笑了...

每天浏览各大网站,难免会碰到404页面啊。你注意过404页面么?猿妹搜罗来了下面这些知名网站的404页面,以供大家欣赏,看看哪个网站更有创意: 正在上传…重新上传取消 腾讯 正在上传…重新上传取消 网易 淘宝 百度 新浪微博 正在上传…重新上传取消 新浪 京东 优酷 腾讯视频 搜...

相关热词 c# 局部 截图 页面 c#实现简单的文件管理器 c# where c# 取文件夹路径 c# 对比 当天 c# fir 滤波器 c# 和站 队列 c# txt 去空格 c#移除其他类事件 c# 自动截屏
立即提问