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

如何让bootstrap的左列填充到整个屏幕的高度?

要让Bootstrap的左列填充到整个屏幕的高度,可以通过以下步骤实现:

  1. 首先,确保你已经正确引入了Bootstrap的CSS和JS文件。
  2. 在HTML文件中,使用Bootstrap的栅格系统布局,将整个页面划分为左右两列。例如,可以使用col-md-3来定义左列的宽度,使用col-md-9来定义右列的宽度。
  3. 使用CSS来设置左列的高度为整个屏幕高度。可以通过以下方式实现:
代码语言:txt
复制
html, body {
  height: 100%; /* 设置HTML和body元素的高度为100% */
  margin: 0; /* 去除默认的margin */
  padding: 0; /* 去除默认的padding */
}

.left-column {
  background-color: #f5f5f5; /* 设置左列的背景颜色 */
  height: 100%; /* 设置左列的高度为整个屏幕高度 */
}
  1. 在HTML文件中,将左列的内容放置在一个具有.left-column类的容器中,以便应用上述CSS样式。
代码语言:txt
复制
<div class="container-fluid">
  <div class="row">
    <div class="col-md-3 left-column">
      <!-- 左列内容 -->
    </div>
    <div class="col-md-9">
      <!-- 右列内容 -->
    </div>
  </div>
</div>

这样,左列就会填充到整个屏幕的高度了。

需要注意的是,以上解决方案是基于Bootstrap的v3版本,具体的CSS类名和HTML结构可能会因不同版本的Bootstrap而有所不同。另外,对于响应式布局,可能需要在不同的屏幕尺寸下调整左列的高度,可以使用媒体查询来实现。

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

相关·内容

前端移动web-day05学习笔记

框架作用:提高开发人员的工作效率(ctrl + c/v 复制粘贴即可) 2.如何使用Bootstrap框架(该流程适用于所有的第三方框架) a.进官网:http://www.bootcss.com/...(行row+列column),在不同的屏幕下显示不同的区域 c.复制粘贴 3.bootstrap环境配置 目前bootstrap有三个版本,分别是 2.x、3.x、4.x,2.x是旧的版本,3.x是新的稳定版本...默认左右margin为 -15px (作用是抵消container左右的padding) c.列col: 类名遵循固定的格式 col-s-x s(screen):表示屏幕尺寸,他们有四个可选值 lg...:响应式版心容器 默认样式: 没有高度、边框、颜色 左右15px的padding 宽度是响应式 屏幕宽度 < 768 宽度100% 768 屏幕宽度 三分之一 5-栅格偏移 栅格默认是左浮动的

2.9K20
  • 第122天:移动端开发常见事件和流式布局

    2、 viewport 在移动端用来承载网页的这个区域就是我们的视觉窗口viewport,这个区域可以设置高度宽度,可以按比例放大缩小,而且能设置是否允许用户自行缩放。 ?...-- 4 此处的代码会显示在一个固定宽度且居中的容器中 5 该容器的宽度会跟随屏幕的变化而变化 6 --> 7 8 栅格系统:Bootstrap...中定义了一套响应式的网格系统,其使用方式就是将一个容器划分成12列,然后通过col-xx-xx的类名控制每一列的占比。...row类: 因为每一个列默认有一个15px的左右外边距。 row类的一个作用就是通过左右-15px屏蔽掉这个边距。...pull-left 左浮动类 pull-right 右浮动类 center-block类:让一个固定宽度的元素居中。

    3.6K40

    数据地图系列10|excel(VBA)数据地图透明度填充法

    2、添加透明度列变量 =($E$1-D4)/($E$1-$E$2)*90% 根据指标值的范围将指标值转化为0%~90%的透明度指标。 ? 3、选择透明度填充的主色,作为填充色色调的主题色。 ?...将选好的主色填充到指定单元格中。...6、在开发工具中插入一个按钮,并的制定宏代码(命名为填色)。 ? 然后点击一下填色按钮,看下神奇的效果吧~ ? ? ? ?...最后将插入的矩形(作为地图图例)放在数据地图的合适位置,使用照相机快照功能将整个数据地图牌照引用。 保存的时候仍然要保存为xlsm格式的带宏文件。...只需要将你提前准备好的填充颜色主色复制进填色单元格中,然后单击填色按钮,就可以实现不同色调的填充效果。

    3.5K60

    从零开始学 Web 之 移动Web(七)Bootstrap

    常见的响应式框架有: 1、Bootstrap 官网:http://www.bootcss.com/ ? 简洁、直观、强悍的前端开发框架,让web开发更迅速、简单。...Framework7 主要的作用就是让你有机会能够使用 HTML,CSS 和 JavaScript 简单明了地开发 iOS 和 Android 应用。.../lib/bootstrap/js/bootstrap.min.js"> 3、bootstrap 布局容器 bootstrap 的 css 样式中,有一个起着支撑整个页面框架的容器...4、bootstrap 栅格系统 概念:Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会默认分为12列。...2.Row可以再次嵌套在列中。如果不能填满整列,则默认从左排列,如果超出,则换行展示。 5、列排序 col-xs-offset-n:往右偏移 n 个栅格,但是会影响后面所有元素也偏移 n 个栅格。

    5.7K30

    Bootstrap基本入门大全

    Bootstrap 是基于 HTML、CSS、JAVASCRIPT的,它简洁灵活,使得 Web 开发更加快捷。...下面有常用的bootstrap介绍,基本上就够用了,但是有些样式也没有写全,先自己学会怎么使用,再去官网上深入研究吧 1.栅格系统 定义:一系列行和列构建的布局,可以跟着屏幕自动布局 最多可以展示12个列...网页上所有的内容都放在这个容器中 两种布局:固定布局-container(自动居中),流式布局-container-fluid(铺满整个屏幕) 创建行:(...一般最多显示12列,如果只想要显示四列,可以将12列均分到四列上) 参数介绍: col-lg-3:lg(当屏幕大于1200时,大屏幕) con-md-3:md...7.导航:添加nav 可以添加nav-justified让导航铺满整个屏幕 基本:nav-tabs ?

    2.6K100

    Bootstrap基本入门大全

    下面有常用的bootstrap介绍,基本上就够用了,但是有些样式也没有写全,先自己学会怎么使用,再去官网上深入研究吧 1.栅格系统 定义:一系列行和列构建的布局,可以跟着屏幕自动布局 最多可以展示12个列...网页上所有的内容都放在这个容器中 两种布局:固定布局-container(自动居中),流式布局-container-fluid(铺满整个屏幕) 创建行:(...一般最多显示12列,如果只想要显示四列,可以将12列均分到四列上) 参数介绍: col-lg-3:lg(当屏幕大于1200时,大屏幕) con-md-3:md..."> 下拉菜单的小三角: 快速浮动: pull-left:左浮动 pull-right:右浮动 清除浮动:clearfix 块元素居中:center-block 文字居中:text-center...7.导航:添加nav 可以添加nav-justified让导航铺满整个屏幕 基本:nav-tabs ?

    2K10

    CSS 基础系列:常见布局方式

    (不设置宽度时默认撑满整个屏幕),之后给 content 和 header 子元素(比如头部的导航条)、footer 子元素一个共同的宽度。...此时布局是这样的: image.png 这里要注意的点:块级元素在不显式设置宽度的情况下确实撑满整个屏幕,从这个角度来看,width 设置为 100% 似乎没有必要。...两种布局的对比: 优先加载主列。 三列浮动,配合负外边距形成三列布局 两种布局方式的主要区别在于如何处理主列,从而让其内容不被覆盖。...在不优先加载主列的情况下,dom 结构可以按照左中右顺序书写,这样不需要额外设置 order;因为我们这里要优先加载主列,所以 dom 结构还是先写主列,之后通过降低左列的 order 恢复顺序。...假设某一列高度最大,则父盒子的高度会等于这一列高度,而其他列本来的留白部分由带背景色的 padding 补偿。

    1.8K20

    第124天:移动web端-Bootstrap轮播图插件使用

    Bootstrap JS插件使用 > 对于Bootstrap的JS插件,我们只需要将文档实例中的代码粘到我们自己的代码中 > 然后作出相应的样式调整 Bootstrap中轮播图插件叫作Carousel...1、由于轮播图片超宽造成的影响   - 美工为了在不同屏幕下更好地展示将图片两边做的非常宽,但是我们大多数情况的页面宽度都无法满足这样的图片宽度   - 而且Bootstrap的样式中默认将图片的max-width...设置为100%;   - 造成界面图片缩放   - 想在一个较小屏幕下展示一个超宽的图片,并让图片居中显示   + 两种办法:   (1) 换用背景图的方式,background-position...3列,较小屏幕是分为2列 - 所以使用网格系统划分 支付交易保障 银联支付全称保证支付安全 六、响应式辅助类型 - 整个板块在超小屏幕下是隐藏起来的

    6.3K40

    BootStrap应用开发学习入门

    Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它是一个简洁、直观、强悍的前端开发框架,可以让web开发更迅速、简单。 BootStrap有什么作用和特点?...特点: 简单容易上手,开源产品,提高开发人员的工作效率 移动设备优先:自 Bootstrap 3 起,框架包含了贯穿于整个库的移动设备优先的样式。...渐进增强:随着屏幕大小的增加而添加元素 (2) meta 源标签 viewport meta 标签 为了让 Bootstrap 开发的网站对移动设备友好,确保适当的绘制和触屏缩放: 让整个图片变成圆形。 .img-thumbnail ## 标签包含img标签。...height: auto; #相关元素的高度取决于浏览器。 max-width: 100%; #让图像按比例缩放,不超过其父元素的尺寸。

    17.6K20

    网页布局的几种方式有哪些_做网页建议用哪种布局

    ),高度大都是用px来固定住。...缺点:因为宽度使用%百分比定义,但是高度和文字大小等大都是用px来固定,所以在大屏幕下显示效果会变成有些页面元素宽度被拉的很长,但是高度、文字大小还是和原来一样,显示非常不协调 栅格化布局   将网页宽度人为的划分成均等的长度...bootstrap 的栅格系统是通过一系列的行和列的组合来创建页面布局,它的栅格系统最大分为12份: 不过 版本bootstrap3 与 bootstrap4 实现栅格系统方式不一样, bootstrap3...为了兼容 IE,采用的是浮动方式来实现栅格系统: 即每一个栅格都是用左浮动和百分比来进行排版,当窗口宽度改变,对应改变 container 容器的宽度,对应栅格宽度自然也跟着改变: bootstrap4...Media Queries 是响应式设计的核心,它根据条件告诉浏览器如何为指定视图宽度渲染页面。在优秀的响应范围设计下可以给适配范围内的设备最好的体验,在同一个设备下实际还是固定的布局。

    3K20

    Bootstrap实用手册

    如何编写响应式网页 (重点) (1). 必须声明视口(已解决) (2)....列 根据适用屏幕分成四种类型 A. .col-xs-* a. .col-xs-1 : 在超小屏幕中,占一列的宽(8.33%) b. .col-xs-2 : 在超小屏幕中,占两列的宽(16.66%) c.....col-xs-12 : 在超小屏幕中,占 12 列的宽(100%) B. .col-sm-*:在小型屏幕中 所占列宽数 C. .col-md-*:在中型屏幕中 所占列宽数 D. .col-lg-*:...列排序数量,控制某列向右或向左移动,并不影响其它的列,主要作用是在特定的屏幕下临时调整列的出现位置 A、col-lg-push-n: 在 lg下,当前列向右移动n 列的距离 B、col-lg-pull-n...Bootstrap 组件-巨幕.jumbotron,如果想让巨幕组件的宽度与浏览器宽度一致并且没 有 圆 角 , 请 把 此 组 件 放 在 所 有 .container 元 素 的 外 面 , 并 在

    6K20

    BootStrap应用开发学习入门

    Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它是一个简洁、直观、强悍的前端开发框架,可以让web开发更迅速、简单。 BootStrap有什么作用和特点?...特点: 简单容易上手,开源产品,提高开发人员的工作效率 移动设备优先:自 Bootstrap 3 起,框架包含了贯穿于整个库的移动设备优先的样式。...渐进增强:随着屏幕大小的增加而添加元素 (2) meta 源标签 viewport meta 标签 为了让 Bootstrap 开发的网站对移动设备友好,确保适当的绘制和触屏缩放: 让整个图片变成圆形。 .img-thumbnail ## 标签包含img标签。...height: auto; #相关元素的高度取决于浏览器。 max-width: 100%; #让图像按比例缩放,不超过其父元素的尺寸。

    14.6K30

    几种常见的CSS布局

    ,块级元素充满整个屏幕,但header、content和footer的内容区设置同一个width,并通过margin:auto实现居中。...③ 缺点 center部分的最小宽度不能小于left部分的宽度,否则会left部分掉到下一行 如果其中一列内容高度拉长(如下图),其他两列的背景并不会自动填充。...两种布局方式的不同之处在于如何处理中间主列的位置: 圣杯布局是利用父容器的左、右内边距+两个从列相对定位; 双飞翼布局是把主列嵌套在一个新的父级块中利用主列的左、右外边距进行布局调整 四、等高布局 等高布局是指子元素在父元素中高度相等的布局方式...假设你需要实现一个两列等高布局,侧栏高度要和主内容高度相等。...当 元素比较短的时候(比如小于屏幕的高度),我们期望这个 元素能够“粘连”在屏幕的底部 ?

    89820

    几种常见的 CSS 布局

    ,块级元素充满整个屏幕,但header、content和footer的内容区设置同一个width,并通过margin:auto实现居中。...③ 缺点 center部分的最小宽度不能小于left部分的宽度,否则会left部分掉到下一行 如果其中一列内容高度拉长(如下图),其他两列的背景并不会自动填充。...两种布局方式的不同之处在于如何处理中间主列的位置: 圣杯布局是利用父容器的左、右内边距+两个从列相对定位; 双飞翼布局是把主列嵌套在一个新的父级块中利用主列的左、右外边距进行布局调整 四、等高布局 等高布局是指子元素在父元素中高度相等的布局方式...假设你需要实现一个两列等高布局,侧栏高度要和主内容高度相等。...当 元素比较短的时候(比如小于屏幕的高度),我们期望这个 元素能够“粘连”在屏幕的底部 ?

    91920

    面了一圈,一个 offer 也没收到...

    底层,我们可以定义为 bottom,在顶层是按照从右到左的顺序进行打印 2、左列,我们可以定义为 left,在左列是按照从下到上的顺序进行打印 在打印的过程中,矩阵的可打印区间在不断的发生变化: 每当把从左到右把一行打印完毕之后...,即 bottom 位置向上挪了一层 每当把从下到上把一列打印完毕之后,整个矩阵就在左部少了一列,即 left 位置向右挪了一列 每当 top、right、bottom、left 发生挪动之后,需要判断它们挪动之后的区间是否还存在...// 每当把从右到左把一行打印完毕之后,整个矩阵就在底部少了一层,后续打印不需要再去处理它们 // 每当把从下到上把一列打印完毕之后,整个矩阵就在左部少了一列,后续打印不需要再去处理它们...// 整个打印区间需要删除这一列了,因此,将 right 的层数向左挪 right -= 1; // 如果此时发现右部位置越过了左部位置...// 整个打印区间需要删除这一列了,因此,将 left 的层数向右挪 left += 1; // 如果此时发现右部位置越过了左部位置

    44050

    为什么拼多多的笔试题这么难?

    // 每当把从右到左把一行打印完毕之后,整个矩阵就在底部少了一层,后续打印不需要再去处理它们 // 每当把从下到上把一列打印完毕之后,整个矩阵就在左部少了一列,后续打印不需要再去处理它们...表示左部所在的列数位置,一开始在第 0 列 int left = 0; // right 表示右部所在的列数位置,一开始在第 matrix[0].length - 1...// 整个打印区间需要删除这一列了,因此,将 right 的层数向左挪 right--; // 如果此时发现右部位置越过了左部位置...// index 的元素填充完毕之后,开始填充下一个元素 index++; } // 经过上面这个循环之后,此时,左部这一列的所有元素已经打印完毕...// 整个打印区间需要删除这一列了,因此,将 left 的层数向右挪 left++; // 如果此时发现右部位置越过了左部位置

    26300

    我曾经在极端愤怒的情况下做不出简单题!

    底层,我们可以定义为 bottom,在顶层是按照从右到左的顺序进行打印 2、左列,我们可以定义为 left,在左列是按照从下到上的顺序进行打印 在打印的过程中,矩阵的可打印区间在不断的发生变化: 每当把从左到右把一行打印完毕之后...,即 bottom 位置向上挪了一层 每当把从下到上把一列打印完毕之后,整个矩阵就在左部少了一列,即 left 位置向右挪了一列 每当 top、right、bottom、left 发生挪动之后,需要判断它们挪动之后的区间是否还存在...// 每当把从右到左把一行打印完毕之后,整个矩阵就在底部少了一层,后续打印不需要再去处理它们 // 每当把从下到上把一列打印完毕之后,整个矩阵就在左部少了一列,后续打印不需要再去处理它们...// 整个打印区间需要删除这一列了,因此,将 right 的层数向左挪 right -= 1; // 如果此时发现右部位置越过了左部位置...// 整个打印区间需要删除这一列了,因此,将 left 的层数向右挪 left += 1; // 如果此时发现右部位置越过了左部位置

    59220
    领券