使用BootStrap中的栅格系统后，页面调整变形的解决方法

最新推荐文章于 2021-11-22 09:50:04 发布
最新推荐文章于 2021-11-22 09:50:04 发布
阅读量2.4k 收藏
点赞数 1
CC 4.0 BY-SA版权
分类专栏： 日常待整理 文章标签： bootstrap 布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/github_37819256/article/details/60965263
本文介绍了一种解决网页在不同屏幕尺寸下布局错位的方法。通过为使用栅格系统的class添加全部屏幕属性，实现了网页布局的自适应调整。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在做考试页面时，使用简单的10-2分格布局。发现缩小后，div位置错乱，如图




解决方案如下：

为每个使用到栅格的class添加所有的屏幕属性，实现自适应



效果如图

缩小后

缩小前


Bootstrap 一篇就够 快速入门&使用（中文文档）
m0_60786924的博客
05-02 3万+
目录 一、Bootstrap简介 什么是 Bootstrap？ 历史 为什么使用 Bootstrap？ Bootstrap 包的内容 在线实例 Bootstrap 实例 更多实例 Bootstrap 实例2 二、Bootstrap环境安装 下载 Bootstrap 文件结构 预编译的 Bootstrap Bootstrap 源代码 HTML 模板 实例 实例 实例 Staticfile CDN 推荐 三、关于Boostrap的中文文档 布局 Container..
bootstrap栅格系统错位问题
10-19 958
在项目中div可以设置属性class=“col-size-x” //size取值为xs，sm，md，lg；x取值为1-12 可以让此div占据本行的 x/12 .col-xs- 超小屏幕 手机 (<768px).col-sm- 小屏幕 平板 (≥768px).col-md- 中等屏幕 桌面显示器 (≥992px).col-lg- 大屏幕 大桌面显示器 (≥1200px) ...
bootstrap栅格系统进行偏移格式
weixin_34124939的博客
01-11 630
本文为博主原创，转载请注明出处：       offset偏移都是向右偏移，且只能向右偏移，例：          col-md-offset-2,向右偏移两列。          col-md-pull-偏移数值         //向左偏移      col-md-push-偏移数值         //向右偏移  col-md-offset-数据和col-md-push-数值的区别：    ...
bootstrap 栅格系统排列出错
weixin_43457011的博客
11-22 762
问题描述，如下图 排列的时候错位了 解决方法： 1.使用 栅栏 系统的时候，应该在每一行都使用 row 单独包裹起来，不要直接在一行中连续加入 col 让他自动换行。 2.注意所有元素的高度，最好是固定元素高度 ...
在html中引入bootstrap后，导致原来的css布局混乱的解决方法
树欲静
04-27 4311
<!--小白的bug记录--> 项目场景： 完善网页代码 问题描述： html中引入bootstrap后，导致原来的css布局混乱的问题 原因分析： 是因为bootstrap的css样式和原来的样式冲突了 解决方案： 先在浏览器中打开项目，然后打开浏览器的控制台的styles窗口 观察现在的网页和原来的网页最开始的不同的地方，可以看到最开始不同的就是这个地方 用小指针选中这个地方，然后把这个地方的样式给一个个取消，当取消掉某个属性时，网页布局回复正..
bootstrap栅格错位问题的解决方法
weixin_33918357的博客
10-14 1855
bootstrap 3的栅格系统有时会出现错位情况，原因是上一行的元素高度不一，导致元素float错误。解决方法使用栅格系统的时候，应该在每一行都使用row单独包裹起来，不要直接在一行中连续加入col让他自动换行。注意所有元素的高度，最好是固定元素高度 转载于:https://blog.51cto.com/h2appy/1861971...
Bootstrap栅格系统使用方法及页面调整变形的解决方法
08-31
Bootstrap栅格系统使用方法及页面调整变形的解决方法 Bootstrap栅格系统是Bootstrap框架中的一个非常重要的组件，它可以帮助开发者快速地创建响应式页面布局。栅格系统的出现使得Bootstrap的跨设备布局显示变得...
Bootstrap栅格系统的响应式工具类：有效利用预设类打造快速布局
第四章通过具体的实践案例，讲述了如何利用Bootstrap栅格系统快速构建响应式布局，并详细分析了页面布局和导航栏的实现方法。最后一章重点介绍了高级响应式工具类的使用，包括显示和隐藏工具类、排版与间距工具类，...
使用栅格系统实现网页图像布局：设备独立像素和图像响应性
引言：栅格系统的重要性和应用背景 ### 1.1 网页图像布局的意义与挑战 在当今互联网时代，网页设计和开发越来越重要。一个好的网页设计旨在提供良好的用户体验，使用户能够轻松地浏览和使用网页内容。而其中一个...
bootstrap栅格系统中同行div高度不一致的解决方法
热门推荐
景韦的专栏
11-02 3万+
使用bootstrap的栅格系统排版，经常会碰到同一行的div高度不一致的情况，例如这样： 需要4个div高度相同，网上搜索了些方法，自己进行了尝试，下面这个方法是我试成功了的，但多少都有不尽人意的地方，求更好的方法 使用flex布局，优点：显示准确，缺点：兼容性差 .row { display: -webkit-box; display: -webkit-flex;
bootstrap高度不统一产生布局错乱的解决方法
weixin_42964571的博客
09-11 4430
bootstrap高度不统一造成的布局错乱 初次写博客，只是用来帮助记忆的，如有不正确的地方，还望大神指正： reheight(); $(window).resize(function () { reheight(); }); function reheight() { var arr = []; $('#pro_cont...
Bootstrap之栅格系统偏移
机器猫不吃鱼的博客
09-04 7730
Bootstrap之栅格系统偏移         Bootstrap之栅格系统偏移：           在Bootstrap中可能会使用到offset（偏移），具体语法格式如下：                 1  //适合在pc端向右偏移一格         col-xs-1  offset-xs-offset-1">1  //适合在手机端向右偏移一格         <div
Bootstrap笔记 -- 栅格、列偏移、表格、表单
m0_38024592的博客
11-15 1346
HTML 5 文档类型（Doctype） Bootstrap 使用了一些 HTML5 元素和 CSS 属性。为了让这些正常工作，您需要使用 HTML5 文档类型（Doctype）。 因此，请在使用 Bootstrap 项目的开头包含下面的代码段。 &lt;!DOCTYPE html&gt; &lt;html&gt; .... &lt;/html&gt; 如果在 Bootstrap 创建的网...
[笔记]解决页面缩小时页面布局会乱的问题
banyao4415的博客
04-01 4176
给body加上一个min-width最小宽度，以px为单位，这样当页面变小时，当达到你所设置的最小宽度，body的宽度不再改变，超出的部分会用横向滚动条显示，其内所有元素的布局也不会受影响。 使用百分比设置宽度，所有会在页面变化后布局改变的元素的宽度都设置成百分比宽度，这样在缩放时，页面内的各个元素也会跟着缩放，宽度占比不变，当然前提是设置CSS样式前，先给body和h...
bootstrap放大缩小后变形的解决办法
u010523770的专栏
02-03 6139
http://www.cnblogs.com/xiangxiao/p/4768695.html
解决Bootstrap container样式左右内边距15px，导致屏幕不美观
SmallLu161226的博客
01-13 3万+
首先上问题：此问题为bootstrap的 container样式导致，该样式默认左右内边距15px为了栅栏效果而设计，具体看源码css样式，如下图，右侧黄色边框边距和30px，实为两个div左浮动，将边距挤到右侧； 解决它很简单：只需复写 container样式 padding-left：0px 和padding-right：0px； 然后在该容器子元素 row复写样式 .row{margi
bootstrap图片如何做到自适应？
zxcv12345hj的博客
02-12 8344
bootstrap响应式图片的正确的设置是在img上面加上两个类就可以了 src="..." class="img-responsive center-block" > 如果是在内容页里面的话，直接用js给每个img加上属性就可以了。   $(window).load(function(){  $(".panel-body img").addClass
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值