文档建议反馈控制台
首页
学习
活动
专区
工具
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 4:对于新的块，使用".row“还是".col-12”更好？为什么？js右下角弹出js el获取js 节点属性js屏蔽a链接js的类型转换js读文件操作js传listjs组件的写法js5 n系列
相关搜索:
页面内容是否对你有帮助？
有帮助
没帮助

相关·内容

BootStrap初始

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

    01_Bootstrap基础组件01

    布局方式 使用 float 的布局方式 选择弹性盒模型（flexbox） 注：Bootstrap3 的 4 种栅格： 特小（col-xs-） 适配手机(<768px) 小（col-sm-） 适配平板...4.1 简介 Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。...-3 col-md-2 Bootstrap 在超小屏幕中，会查找带有 col-xs-* 的类，在小屏幕设备中，会查找带有 col-sm-* 的类，在中等屏幕设备中，会查找带有...使用列偏移只需在列元素上添加类名 .col-md-offset-* （星号代表要偏移的列组合数），具有这个类名的列就会偏移，如：在列元素上添加 .col-md-offset-4，表示该列向右偏移4个列的宽度...margin-left: 0; } 要注意的是，使用col-md-offset-* 对列进行右偏移时，要保证列与偏移列的总数不超过12，不然会导致列断行显示。

    8900

    从零开始学 Web 之 移动Web（七）Bootstrap

    4、bootstrap 栅格系统 概念：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"> col-xs-12 col-sm-6 col-md-4 col-lg-3">...5、列排序 col-xs-offset-n：往右偏移 n 个栅格，但是会影响后面所有元素也偏移 n 个栅格。

    5.7K30

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

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

    35220

    【Bootstrap】002-全局CSS样式-概览和栅格系统

    一、概览 1、HTML5 文档类型 Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型； 参照下面的格式进行设置： 二、栅格系统 Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。...下面就介绍一下 Bootstrap 栅格系统的工作原理： “行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列...例如，三个等宽的列可以使用三个 .col-xs-4 来创建； 如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列； 栅格类适用于与屏幕宽度大于或等于分界点大小的设备...例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度； 使用. col-*-offset-0类重写来自较低网格层的偏移量： 代码： <!

    6310

    移动端WEB开发之响应式布局

    4.x.x：最新版，目前还不是很流行 2.4bootstrap基本使用 在现阶段我们还没有接触JS相关课程，所以我们只考虑使用它的样式库。...Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。...-- 列偏移 -->     col-lg-4">1     col-lg-4 col-lg-offset...-4">2 ​ 列排序 通过使用 .col-md-push-（推） 和 .col-md-pull- （拉）类就可以很容易的改变列（column）的顺序。...-8 col-lg-pull-4">右侧 ​ 响应式工具 为了加快对移动设备友好的页面开发工作，利用媒体查询功能，并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。

    4.1K20

    移动端WEB开发之响应式布局

    4.x.x：最新版，目前还不是很流行 2.4bootstrap基本使用 在现阶段我们还没有接触JS相关课程，所以我们只考虑使用它的样式库。...2.6 bootstrap栅格系统 Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。...-- 列偏移 --> col-lg-4">1 col-lg-4 col-lg-offset...-4">2 ​ 列排序 通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。...-8 col-lg-pull-4">右侧 ​ 响应式工具 为了加快对移动设备友好的页面开发工作，利用媒体查询功能，并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。

    3.4K31

    前端移动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宽度4份(宽度三分之一),(3) col-lg-3 col-md-4 col-sm-6:(1)表示该栅格在屏幕宽度 >= 1200时，(2)占3份(宽度四分之一)，(3)在992宽度4份(宽度三分之一), 4)在 768宽度 < 992时，占6份(二分之一),(5) <768,直接显示一行 5.png 2-版心容器container bootstrap中有两种版心容器可供使用者选择 container

    2.9K20

    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%的宽度。

    2.1K30

    （数据科学学习手札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

    2K23

    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()部件挤到下一行中，所以我们在利用这种网格系统排布网页元素时要注意规范。

    4K30

    响应式网页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

    Jump Start Bootstrap 第2章

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

    2.9K40
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券