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

为什么Bootstrap col会使用全宽度,尽管它写着col 4?

Bootstrap的col类是用于创建响应式网格系统的,它可以将页面水平划分为12个等宽的列。当我们使用col类时,可以通过指定col-x来定义每个列所占的宽度,其中x可以是1到12之间的数字。

在Bootstrap中,col类默认会使用全宽度,即占据父容器的全部宽度。这是因为Bootstrap的设计理念是创建响应式的布局,使得网页能够适应不同屏幕尺寸的设备。为了实现这一目标,Bootstrap使用了CSS的弹性盒子布局(flexbox),通过将每个列的宽度设置为百分比来实现自适应布局。

当我们使用col-4类时,表示该列占据父容器的四分之一宽度,即占据25%的宽度。但由于Bootstrap的网格系统是基于12列的,所以col-4实际上是占据了12列中的4列宽度,即占据了1/3的宽度。因此,即使我们指定了col-4,该列仍然会使用全宽度的1/3。

总结起来,Bootstrap的col类会使用全宽度,尽管它写着col-4,是因为Bootstrap的网格系统是基于12列的,col-4实际上表示占据了1/3的宽度。这样设计的目的是为了实现响应式布局,使得网页能够适应不同屏幕尺寸的设备。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云弹性伸缩(AS)。

  • 腾讯云云服务器(CVM):提供可扩展的计算容量,可根据业务需求快速创建和管理云服务器实例。详情请参考:腾讯云云服务器(CVM)
  • 腾讯云弹性伸缩(AS):自动根据业务需求调整云服务器实例数量,实现弹性伸缩。详情请参考:腾讯云弹性伸缩(AS)
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

BootStrap初始

大家好,又见面了,我是你们的朋友栈君。 序言 什么是Bootstrap Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。...Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品。 为什么要用Bootstrap 移动设备优先:自 Bootstrap 3 起,框架包含了贯穿于整个库的移动设备优先的样式。...例如,三个等宽的列可以使用三个 .col-xs-4 来创建。 如果一“行(row)”中包含了的“列(column)”大于 12,多余的“列(column)”所在的元素将被作为一个整体另起一行排列。...111     //当列的宽度小于一定范围的时候自动变成col-xs...-8的格式 当列的宽度大于一定的范围的时候自动变成col-md-12的格式 <div class="<em>col</em>-xs-<em>4</em> <em>col</em>-md-12" style="border: 1px solid

4.6K10

Bootstrap学习文档(一)

Bootstrap 是什么 Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目,使用这个框架可以简单高效的开发出适配各种屏幕的网站应用,...: center; 经过 Bootstrap封装后的类(class)名为 text-center,这样我们就可以直接使用text-center来使一个 p 标签或者 div 标签里面的内容居中了,从而实现我们软件工程中所说的代码重用...Bootstrap 中的js插件,不需要我们写 js 代码就能帮我们实现要用 js 来实现的效果,而是通过使用 Bootstrap 自定义的属性。...-- 使360浏览器渲染页面时默认使用极速模式,考虑到国内360的大量用户 --> Bootstrap...列偏移 col--offset- 向右偏移,第一个 * 是和屏幕尺寸有关,第二个 * 是偏移的列数,如果偏移的数量大于12则不起作用。

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

    4bootstrap 栅格系统 概念:Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统默认分为12列。...你可以使用类似 .row 和 .col-xs-4 这种预定义的类,可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。...例如,三个等宽的列可以使用三个 .col-xs-4 来创建。 如果一“行(row)”中包含了的“列(column)”大于 12,多余的“列(column)”所在的元素将被作为一个整体另起一行排列。...-12 col-sm-6 col-md-4 col-lg-3"> ...5、列排序 col-xs-offset-n:往右偏移 n 个栅格,但是影响后面所有元素也偏移 n 个栅格。

    5.6K30

    【Java 进阶篇】深入了解 Bootstrap 栅格系统

    在这个示例中,我们使用了三个列,每个列占据了4个网格列的宽度,总和为12列。这是一种常见的布局,因为它适用于桌面屏幕,每个列都具有相同的宽度。...通过在列的类名中添加适当的断点前缀,您可以指定在不同屏幕尺寸上列的宽度。例如,col-sm-4 表示在小屏幕上每个列占据4列,而 col-md-6 表示在中等屏幕上每个列占据6列。...Bootstrap 允许您使用列排序(order)类来轻松实现这一点。...列1显示在列2之后,而列2显示在列1之前,而列3则保持不变。 制作嵌套布局 Bootstrap 栅格系统也支持嵌套布局,这意味着您可以在列中创建更多的行和列,以构建更复杂的布局。...自定义栅格系统 如果您希望创建自定义的栅格系统,而不仅仅使用Bootstrap的默认样式,您也可以使用Bootstrap的Sass版本或Less版本,以便更灵活地定义栅格系统的参数,例如列数、断点、列宽等

    28620

    前端移动web-day05学习笔记

    环境配置 目前bootstrap有三个版本,分别是 2.x、3.x、4.x,2.x是旧的版本,3.x是新的稳定版本,4.x还在完善中,所以我们目前使用的是3.x版本。...一旦屏幕宽度小于1200,单独一行(x的尺寸直接失效) col-md-4:表示该栅格在屏幕宽度大于等于992时,占的宽度比例是4份( 4/12 = 0.33 相当于width:33.3% 三分之一)。...col-lg-3 col-md-4:(1)表示该栅格在屏幕宽度 >= 1200时,占3份(宽度四分之一),(2)在992= 1200时,(2)占3份(宽度四分之一),(3)在992<=屏幕宽度<1200时,占4份(宽度三分之一), <=...992,(4)在 768<= 屏幕宽度 < 992时,占6份(二分之一),(5) <768,直接显示一行 5.png 2-版心容器container bootstrap中有两种版心容器可供使用者选择 container

    2.9K20

    (数据科学学习手札103)Python+Dash快速web应用开发——页面布局篇

    首先需要通过pip install dash-bootstrap-components来安装它,安装完成之后,我们来验证一下是否可以正常使用,推荐以import dash_bootstrap_components...2.1 认识Container()、Row()与Col() Container() dash-bootstrap-components封装了bootstrap框架中的网格系统,我们在使用它进行布局时,...而所谓的网格系统指的是每个Row()部件内部分成宽度相等的12份,传入的Col()部件具有参数width可以传入整数来分配对应数量的宽度,如下例: app4.py import dash import...图7   可以看到当Row()部件下所有Col()部件宽度之和为12时是正好充满的,当宽度之和不足12时剩余的宽度会被空出来,而宽度之和若大于12,则会把导致宽度溢出的Col()部件挤到下一行中,所以我们在利用这种网格系统排布网页元素时要注意规范...图10 利用offset设置偏移   列部件的width参数字典中还可以使用键值对参数offset,传入1到12的整数,它的作用是为对应的Col()部件左侧增加对应宽度的位移,就像下面的例子一样: app8

    1.9K22

    Python+Dash快速web应用开发——页面布局篇

    图2 但我们既然想使用Dash来搭建web应用,很大的一个原因是不熟悉或者不想写繁琐的前端代码,而Dash的第三方拓展库中就有这么一个Python库——dash-bootstrap-components...首先需要通过pip install dash-bootstrap-components来安装它,安装完成之后,我们来验证一下是否可以正常使用,推荐以import dash_bootstrap_components...2.1 认识Container()、Row()与Col() 「Container()」 dash-bootstrap-components封装了bootstrap框架中的「网格系统」,我们在使用它进行布局时...而所谓的网格系统指的是每个Row()部件内部分成宽度相等的「12」份,传入的Col()部件具有参数width可以传入「整数」来分配对应数量的宽度,如下例: ❝app4.py ❞ import dash...()部件宽度之和为12时是正好充满的,当宽度之和不足12时剩余的宽度会被空出来,而宽度之和若大于12,则会把导致宽度溢出的Col()部件挤到下一行中,所以我们在利用这种网格系统排布网页元素时要注意规范。

    2.6K20

    Bootstrap行和列

    -- 列内容 -->在上述示例中,我们使用元素创建了一个行,并添加了.row类。行可以包含一个或多个列,并且总宽度应该等于12列。如果超过12列,那么多余的列自动换行到下一行。...每个列都使用col-类指定了列的宽度。在这种情况下,.col-6表示每个列占据行的一半宽度,因此左侧和右侧内容将并排显示。Bootstrap使用12列的网格系统。...可以使用.col-类来指定列的宽度,如.col-6表示占据一半宽度,.col-4表示占据四分之一宽度,以此类推。...行中包含了三个列(.col-lg-4 col-md-6)。在大型屏幕(大于等于lg断点)上,每个列占据4个网格列的宽度(.col-lg-4),即一行同时显示3个列。...在中等屏幕(大于等于md断点,小于lg断点)上,每个列占据6个网格列的宽度(.col-md-6),即一行同时显示2个列。在小于md断点的屏幕上,每个列自动换行,占据100%的宽度

    1.9K30

    BootStrap网格布局

    如何使用BootStrap样式   BootStrap与其他的开源库类似,直接引用它的css样式文件就可以使用了。...   什么是网格布局   目前流行的响应式布局,在显示界面设定了集中宽度,当宽度满足一定的标准时,就是用当前宽度支持下的样式。   ...这样就可以使一种开发,支持移动端、以及各种分辨率的显示器,达到良好的使用效果。   BootStrap把网页分成12个网格,并有下面四中宽度:自动、750px、970px和1170px ?   ...样式运行效果分别如下:   最大的宽度下: ?   中等宽度下: ?   最小宽度下: ?   ...网格列偏移   BootStrap中支持网格的列偏移:直接在样式中col-md-offset-*就可以达到偏移效果。

    1.7K100

    Jump Start Bootstrap 第2章

    固定宽度的容器被设计为出现在屏幕的中央,在两边都省略了额外的空间。因此,将所有内容包装在一个容器中是一种很好的做法。 在我们的demo里面,我们将使用固定宽度的容器。...类前缀 Bootstrap有四种不同的类前缀,让列适应四种不同尺寸的显示器: col-xs 超小显示器 (屏幕宽度 < 768px) col-sm 小型显示器 (屏幕宽度 ≥ 768px) col-md...假设我们使用Bootstrap创建一个博客的布局;我们给出了它的桌面显示线框图,如图所示 ? 在线框中,我们有一个横跨整个网站宽度的标题。然后我们有一个包含博客文章的三栏布局。...让我们使用一个固定宽度容器使用类container: 接下来,我们在桌面线框中有一个标题。...移动设备中的景观视图利用小型显示器(屏幕宽度768px),我们已经使用col-sm类。移动设备中的竖屏视图使用了额外的小型显示器(屏幕宽度小于768px)。

    2.9K40

    响应式网页bootstrap

    相当于C#UI里面的容器系统,bootstrap对css进行扩展,使用了类似less文件中的变量定义,sacc不仅增加了变量还多了继承、混合、嵌套等功能 布局中必须row包含col,不能单独col...bootstrap网格系统 col- 针对所有设备 col-sm- 平板 - 屏幕宽度等于或大于 576px col-md- 桌面显示器 - 屏幕宽度等于或大于 768px) col-lg- 大桌面显示器...- 屏幕宽度等于或大于 992px) col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px) 针对每一行设置,container (固定宽度) 或 container-fluid (全屏宽度...css属性上封装了三种布局方式,使用控件嵌套方式布局,设置宽度最大值和最小值 .container, which sets a max-width at each responsive breakpoint...插件 bootstrap3支持字体图标Glyphicons,bootstrap4不支持 nodejs安装bootstrap 安装bootstrap4 npm install bootstrap使用的时候需要

    6.8K30

    Bootstrap响应式前端框架笔记一——强大的栅格布局

    Bootstrap是一款HTML,Css和JavaScript开发框架,其也支持开发者进行自定义构建,开发者也可以只打包自己需要的功能模块使用。...Bootstrap是一款响应式的编程框架,所谓响应式,是指在不同屏幕尺寸的设备上,使用Bootstrap开发的项目可以自动进行布局调整适配。...二、均分与尺寸适配     Bootstrap将浏览器尺寸分为4个等级,分别为xs,sm,md和lg。...-8 .col-md-4 将xs以上尺寸的窗口宽度进行6等分,xs为最小等级</p...12,将另起一行进行布局,示例如下: Bootstrap最多一行可以分配12列,超出将另起一行,例如下面三个div,宽度分别为8,3,4,第3个div将另起一行布局 <div class

    2.3K10

    Web-第五天 BootStrap学习

    Web-第五天 BootStrap学习 Bootstrap基础入门 今日内容介绍 使用bootstrap重写首页 今日内容学习目标 学会通过官方提供demo实例,完成自己需要的功能。...能够从已有html文档中,找到将要修改的位置,并进行简单调整 第1章 案例:重写首页 1.1 案例介绍 将使用Bootstrap重写首页,整个案例中将使用Bootstrap各种模块,为了方便编程,...//v3.bootcss.com/css/#grid-options Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统自动分为最多12...行使用的样式“.row”,列使用样式“col-*-*” 内容应当放置于“列(column)”内 列大于12时,将另起一行排列 栅格类适用于与屏幕宽度大于或等于分界点大小的设备,并且针对小屏幕设备覆盖栅格类...-4 col-xs-6"> <img src="..

    5.1K50
    领券