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

Bootstrap 4的新手,列没有正常运行?

Bootstrap 4是一种流行的前端开发框架,用于快速构建响应式和现代化的网站和应用程序。如果您在使用Bootstrap 4时遇到列没有正常运行的问题,可能是以下几个原因导致的:

  1. 引入错误的CSS和JavaScript文件:确保您正确地引入了Bootstrap 4的CSS和JavaScript文件。您可以通过在HTML文件的头部添加以下代码来引入Bootstrap 4的CSS文件:
代码语言:txt
复制
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">

并在文件的底部添加以下代码来引入Bootstrap 4的JavaScript文件:

代码语言:txt
复制
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script>
  1. 错误的HTML结构:Bootstrap 4的网格系统是基于行(row)和列(column)的布局。确保您正确地使用了.container.row.col-*等类来组织您的内容。例如,以下是一个基本的Bootstrap 4网格布局的示例:
代码语言:txt
复制
<div class="container">
  <div class="row">
    <div class="col-md-6">内容1</div>
    <div class="col-md-6">内容2</div>
  </div>
</div>

在这个示例中,.container类用于创建一个容器,.row类用于创建一个行,.col-md-6类用于创建两个等宽的列。

  1. 缺少必要的CSS类:Bootstrap 4提供了许多CSS类,用于样式化和布局元素。确保您正确地使用了所需的CSS类来定义您的布局。例如,.container类用于创建一个固定宽度的容器,.row类用于创建一个行,.col-*类用于创建列,.text-center类用于居中文本等。

如果您遵循了以上步骤,并且仍然遇到问题,建议您检查浏览器的开发者工具(如Chrome的开发者工具),查看是否有任何错误消息或警告,以帮助您进一步调试和解决问题。

关于Bootstrap 4的更多信息和详细文档,请参考腾讯云的相关产品和产品介绍链接地址。

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

相关·内容

bootstrap5基本使用

前言 bootstrap5官方文档:https://getbootstrap.com/docs/5.1 bootstrap虽然没有Vue强大,但是对于新手快速建造精美的web有着非常大帮助。...非常高兴是官方文档很详细,不仅有详细api文档,而且有完善示例,对新手来说,一个例子胜过千字文。...---- Gird网格 container里面自动就有gird布局,里面的row元素内元素没有类属性col则元素占一行全部宽度。若有,则会按照12原则分配宽。...如果小于,则无效果,等于没有col这个东西。 .col-md-auto当视图大于md时,自动计算宽度,重新排列。 .row-cols-2设置在行元素中,表示一行中最多显示几个元素。....order-给排序,可以改变顺序 .offset- 偏移几个宽度。

39930

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

4bootstrap 栅格系统 概念:Bootstrap 提供了一套响应式、移动设备优先流式栅格系统,随着屏幕或视口(viewport)尺寸增加,系统会默认分为12。...栅格系统中是通过指定1到12值来表示其跨越范围。例如,三个等宽可以使用三个 .col-xs-4 来创建。...意味着小屏幕上效果在大屏幕上也是可以正常显示的人,但是大屏幕上设置在小屏幕上却无法正常显示。...因为: 如果在外层没有再包含container,那么嵌套宽度就是参参照当前所在栅格; 如果外层添加了container,那么参照就是核心样式文件所设置容器宽度 <div class="container...-- 1.如果在外层<em>没有</em>再包含container,那么嵌套<em>列</em><em>的</em>宽度就是参参照当前所在<em>的</em>栅格 2.如果外层添加了container,那么参照就是核心样式文件所设置<em>的</em>容器宽度

5.6K30
  • 2018最新win10 安装tensorflow1.4(GPUCPU)+cuda8.0+cudnn8.0-v6 + keras 安装CUDA莫名失败 导入tensorflow失败报错问题解决

    4....在下载之后,按照步骤安装,不建议新手修改安装目录,同上,环境不需要配置,安装程序会自动配置好。...正常模式重启,重新安装即可。 这里可能会出现文件NVIDIA Corporation被占用情况,进入安全模式删除即可。 6....1.1以下的话好像基本不能GPU运行了 (CPU版本:pip install --upgrade tensorflow)CPU版本最简单也适合新手  直接python创建完虚拟环境3.6之后直接安装即可...版本不匹配,等等 以上所有报错我都经历过,并且别人教程都说是CUDA和CUDNN版本不匹配,或者VS2015/2017没有安装 ,的确是这样,结果我都试了好多个版本都没有解决。

    2.3K20

    简谈Bootstrap4Bootstrap3区别

    Bootsrap3采用float布局,而Bootstrap采用flex布局 Bootstrap4栅格系统可以不用添加指定数 如row 里面有2个col 会任何尺寸下均分row Bootstrap3...只有4种栅格类 分别为(col-xs特小,col-sm小,col-md,中col-lg大) Bootstrap4有5种栅格类,(col-特小,col-sm-小,col-md-中,col-lg-大,col-xl...-超大) Bootstrap4使用rem为单位 Bootstrap4设置偏移时通过 offset-sm-4,而Bootstrap3通过col-sm-offset-4 Bootstrap4增加了响应式容器如...,当小于屏幕尺寸小于栅格类时会占满整个屏幕 注意点: Bootstrap4中不能使用Bootstrap3中hidden-xs,visible-xs类 在Bootstrap4中如果你想实现在某个尺寸下隐藏...B3中使用hidden-sm只会在sm尺寸下隐藏,而其他尺寸会正常显示,在B4中如果你单纯指定d-sm-none 则该元素会在sm尺寸隐藏,但sm以上尺寸也会隐藏,在sm之下尺寸正常显示,这里就涉及到向上兼容问题

    85440

    Baidu Comate实操测评 暨 线下教学环境实测结果报告

    运行现有的测试用例,了解代码行为和预期输出等。...; 依然是运行成功,我们再去查看一下表内容。 表内容查询: 唯一一个有异常就是gender,但是也是没什么违和感,毕竟对应产品使用人群来对照一下就很匹配呢。...插入建议7、vscode插件安装完毕,重启后并未正常显示,使用版本1.89.1 安装完毕并没有正常显示,登陆后先禁用,再次启动后才出现了图标。 尝试重新换个项目文件夹。...最终结果是,并发访问正常没有问题,我与学生们共同尝试了几次,都OK,所以满足基本使用要求,百度本产品还是很不错。...问题2、教学环境保存问题 教学环境毕竟是每次开学前机房部门管理,如果想单独安装插件这个操作倒是可以,问题是这个工具得时时连网,如果没有网络无法登录,无法正常使用,所以上课时候一定要注意网络问题。

    13500

    原程序运行良好,Pyinstaller

    ,分析过程,解决办法和教训 症状 打包成功 运行程序时出现如下报错 C:\Users\xoxo\PycharmProjects\Hentai_Spider>main Traceback (most recent..._bootstrap>", line 2237, in _find_and_load File "<frozen importlib....通过控制变量排除法(过程比较繁琐,不一一举),确定是在读取config.ini时出错,把赋值config_path这里改成确定路径即可正常运行 代码如下: config = configparser.ConfigParser...config.py去读取其所在目录下配置文件,main.py和config.py在同一目录 4 ....(中函数) 教训 封装程序没有聪明到能理解设计意图,所以写代码得更聪明点 如果某项目可能会被封装,让被封装那个程序来抓取目录信息并传递

    1K00

    前端菜鸟是这样入门学习,点进来!

    3.一个学习大纲 01.环境搭建 前端环境很好搭建,一个开发工具即可,webstorm,hbuilder,vscode,sublime。...初学者建议sublime 也不要装插件,没有语法提示,可以打基础 02.html基础 带你去认识html,让你学习去运行html,等浏览器上面打开你页面的时候,你会有很强成就感,然后开始学习html...然后被我狠狠骂了一顿 06,开始你ui框架之旅 这个阶段我推荐从bootstrap开始,这个框架很经典,响应式珊格系统被后来框架一直沿用,在我线下教学那几年,我都会带着学生一起看bootstrap...4.面试技巧培养阶段 这个阶段要培养下公司项目的具体流程以及面试技巧培养,面试回答思路,如果有同学想多了解这方面,我很乐意给大家讲解 因为现在web前端这个职业非常火,这个不是最重要,重要在五年之后...,而这种竞争是在新手之中竞争,在初级工程师、中级工程师、高级工程师是没有竞争,很多人眼红前端工程师工资这么高,自己也想这样去拿高薪,但是大家不知道当初这些人在学习前端时候是怎么学习,才有今天,为了避免大家有这样错误思想

    70410

    Jump Start Bootstrap 第2章

    Bootstrap网格系统将屏幕划分为每行12宽度根据屏幕大小而变化。因此,网格系统是响应式,当浏览器窗口大小发生变化时,这些会动态地调整自身大小。...在上面的代码中,我们没有指定该元素在大型显示器上表现。进一步Bootstrap将自动沿用在超小显示器上指定布局。因此,我们代码中元素将在所有设备上跨越12格。...因为我们有一个总共12个引导,我们将让我们专栏跨越4Bootstrap每一。这样我们就有3个同样大小。... 运行结果如图所示 ? 对于桌面版显示线框,我们还剩下三博客文章。这一次,我们不会为接下来创建单独行。...相反,我们将直接将这些附加到现有的行中。你可能想知道我们怎么能有24(6在每一行中跨越4个引导)。嗯,Bootstrap只允许在一行中使用12个引导

    2.9K40

    Bootstrap实用手册

    文字使用相对尺寸(em,rem),尽量不用绝对尺寸(px) CSS 中 1px 并不代表真实物理设备 1px,如:iPhone4 以后,屏幕为 Retina 屏幕,屏幕大小没有变化,但分辨率提升一倍...栅格布局 好处:效率高,容易控制,实现响应式 不足:没有 栅格布局实际上就是由 div 组成 table 样式响应式结构 使用方法: ①....:div.col-*-* ②. 水平表单栅格系统 A. 最外层:form.form-horizontal (正常情况 .container) B....行:div.form-group /(正常情况div.row) C. :div.col-*-* ? (4). checkbox及radio表单特殊写法(H5规范) ? 17....将自定义css文件后辍名改为less,在此文件开头输入:@import "../less/bootstrap.less"; 系统会生成新css文件 (4).

    6K20

    家乡主题网页设计代码 旅游主题网页设计 html静态网页设计制作 dw静态网页成品模板素材网页 web前端网页设计与制作 div静态网页设计

    ,CSS代码量也很足、很细致,使用hover来完成过渡效果、鼠标滑过效果等,使用表格、表单补充模块,为方便新手学习页面中没有使用js有需要可以自行添加。... ❤ 【作者主页——获取更多优质源码】 ❤ <script src="https://cdn.jsdelivr.net...-- 加载 <em>Bootstrap</em> <em>的</em>所有 JavaScript 插件。你也可以根据需要只加载单个插件。...,不错乱,使用Div+Css技术; 菜单美观、醒目,二级菜单可<em>正常</em>弹出与跳转; 要有JS特效,如定时切换和手动切换图片新闻; 页面中有多媒体元素,如gif、视频、音乐,表单技术<em>的</em>使用; 页面清爽、美观、

    5.5K20

    【Java 进阶篇】Bootstrap 快速入门

    以下是一些使用 Bootstrap 主要优势: 响应式设计:Bootstrap 支持响应式设计,确保您网页可以在不同设备上正常显示,包括桌面、平板和手机。...响应式网格系统 Bootstrap 网格系统是其最强大功能之一。它允许您创建响应式布局,使内容可以适应不同屏幕尺寸。网格系统基于12,您可以将内容放入这些中,以创建灵活布局。...以下是一个简单示例,如何使用 Bootstrap 网格系统来创建一个两布局: <div...每使用 col-md-6 类,表示在中等屏幕尺寸以上,每占据6。这将创建一个两布局,适应中等屏幕及以上设备。...Bootstrap 导航栏具有响应式特性,可以在不同设备上正常显示。 按钮 Bootstrap 提供了多种按钮样式,您可以轻松添加到您网页中。

    23510

    bootstrap table 设置自定义

    问题描述日常工作过程中遇到这样一个问题,在页面上某一个字段内容比较多时,会导致 bootstrap table 被撑大,同时出现滚动条,且后面的操作按钮需要滑动滚动条才可以正常操作,这样用起来就比较麻烦...important; background-color: #B8CCE4 !...important; } 那么设置之后看到效果这里可以看到表头背景色设置已经成功了,但是宽度并没有设置成功。...important; background-color: #B8CCE4 !...这样可以防止单词过长导致内容溢出到这里,本次关于 bootstrap table 设置表格宽度操作就完成了,整体操作虽然不是很复杂,但是还是需要记忆一下,以此博文记录,希望可以帮到有需要小伙伴。

    23610

    Jump Start Bootstrap 第1章

    Bootstrap不仅对网页开发新手有帮助。通过阅读本书,你也将见证Bootstrap如何成为专业程序员福音。 Bootstrap,它为什么而存在?...正如我提到过Bootstrap新手有帮助,但并不只针对新手。 专业人员也可以使用Bootstrap代码进行二次开发;Bootstrap允许你使用Less和Sass来自定义它样式。...响应式网页设计概述 响应式网页设计(Responsive web design)允许开发者创建一个可以在运行中改变布局网站。...准备Bootstrap 首先,我们需要Bootstrap程序包,所以让我们在Bootstrap官方网站 https://v3.bootcss.com/ 上,下载最新4.x.x或3.x.x版本。...这里另外有一个bootstrap.min.css,它是压缩版bootstrap.css。 被称为压缩版,是因为它没有空格和注释,减小了文件尺寸。 它将在你项目完成时使用,为发布项目准备

    3.5K40

    前端框架与库 - Bootstrap响应式设计

    网格系统Bootstrap网格系统基于和行构建,可以自适应地填充容器宽度。...默认情况下,Bootstrap将屏幕分为最多12,通过不同类前缀(如.col-sm-, .col-md-, .col-lg-等)来指定在特定屏幕尺寸下宽。...解决方案确保所有总和不超过12。...忽略自定义样式影响Bootstrap样式可能与你自定义CSS冲突,特别是当你没有充分理解BootstrapCSS规则时。解决方案使用特定于类选择器,或者使用!...在开始任何项目之前,花时间阅读文档是避免常见错误最佳方式。测试多种设备在开发过程中,使用不同设备和浏览器测试页面,确保响应式设计在各种环境下都能正常工作。

    17610

    响应式状态时jqprint打印 原

    最近需要打印,使用jqprint 进行打印,页面状态是电脑平板都能正常显示响应式页面,打印时由于要打印在一个A4纸上,需要定义打印宽度,并且点击打印同时,需要修改页面的样式 从而保证页面内容打印在...A4纸张范围内(点击打印前是响应式,打印时是固定宽度),主要代码如下: $("#printArea").css("width","295mm"); $(".row .col-md-6").removeClass...("col-md-6").addClass("col-xs-6"); //Bootstrap栅格系统从原来中屏幕为2,小于中屏幕为1,点击打印时都为2 $("#printArea").jqprint...(); 如果设置特定位置分页,需要加下面的代码 假如要打印页面中含有表格,我bootstrap框架表格...,打印预览时表格边框比较细,原因估计是bootstrap样式@media print {}设置边框比较淡,我们可以不用bootstrap样式,在打印区域中设置样式,或者在单独css文件中定义样式,

    1.5K20

    BootStrap

    类似 .row 和 .col-xs-4 这种预定义类,可以用来快速创建栅格布局。Bootstrap 源码中定义 mixin 也可以用来创建语义化布局。...负值 margin就是下面的示例为什么是向外突出原因。在栅格内容排成一行。 栅格系统中是通过指定1到12值来表示其跨越范围。...例如,三个等宽可以使用三个 .col-xs-4 来创建。 如果一“行(row)”中包含了(column)”大于 12,多余(column)”所在元素将被作为一个整体另起一行排列。...媒体查询 在栅格系统中,我们在 Less 文件中使用以下媒体查询(media query)来创建关键分界点阈值 简单理解为,响应式布局实现,比如我们在pc端界面是一个样,到了移动端也要正常显示...,下面是一些配置 /* 超小屏幕(手机,小于 768px) */ /* 没有任何媒体查询相关代码,因为这在 Bootstrap 中是默认(还记得 Bootstrap 是移动设备优先吗?)

    3.3K10
    领券