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

最新推荐文章于 2021-11-22 09:50:04 发布
原创 最新推荐文章于 2021-11-22 09:50:04 发布 · 2.4k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#bootstrap #布局

本文介绍了一种解决网页在不同屏幕尺寸下布局错位的方法。通过为使用栅格系统的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页面缩小变形的快速解决办法
08-31
bootstrap布局是应用得很广泛的一种网页布局方法，下面通过本文给大家介绍bootstrap页面缩小变形的快速解决办法，需要的朋友参考下吧
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 4313
<!--小白的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高度不统一产生布局错乱的解决方法
weixin_42964571的博客
09-11 4430
bootstrap高度不统一造成的布局错乱 初次写博客，只是用来帮助记忆的，如有不正确的地方，还望大神指正： reheight(); $(window).resize(function () { reheight(); }); function reheight() { var arr = []; $('#pro_cont...
bootstrap栅格系统中同行div高度不一致的解决方法
热门推荐
景韦的专栏
11-02 3万+
使用bootstrap的栅格系统排版，经常会碰到同一行的div高度不一致的情况，例如这样： 需要4个div高度相同，网上搜索了些方法，自己进行了尝试，下面这个方法是我试成功了的，但多少都有不尽人意的地方，求更好的方法 使用flex布局，优点：显示准确，缺点：兼容性差 .row { display: -webkit-box; display: -webkit-flex;
Bootstrap之栅格系统偏移
机器猫不吃鱼的博客
09-04 7731
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 创建的网...
bootstrap 缩放混乱简单解决方法
itisyu
11-25 5066
bootstrap 布局 缩放 混乱
bootstrap放大缩小后变形的解决办法
u010523770的专栏
02-03 6139
http://www.cnblogs.com/xiangxiao/p/4768695.html
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值