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

Bootstrap 4:防止向右移动的列(使用min-width上的浮动:1200px)向下压下另一列

Bootstrap 4是一个流行的前端开发框架,用于构建响应式和移动优先的网站和应用程序。它提供了一套丰富的CSS和JavaScript组件,可以快速构建美观和功能强大的界面。

在Bootstrap 4中,要防止向右移动的列(使用min-width上的浮动:1200px)向下压下另一列,可以使用Bootstrap的栅格系统和响应式工具类来实现。

首先,我们需要使用Bootstrap的栅格系统将页面分为12个列。通过将列包裹在一个容器(container)或容器流(container-fluid)中,可以创建一个响应式的布局。

然后,我们可以使用Bootstrap的响应式工具类来控制列在不同屏幕尺寸下的行为。在这种情况下,我们可以使用col-md类来指定列在中等屏幕尺寸(大于等于768px)下的宽度,并使用col-xl类来指定列在超大屏幕尺寸(大于等于1200px)下的宽度。

具体实现代码如下所示:

代码语言:txt
复制
<div class="container">
  <div class="row">
    <div class="col-md">
      <!-- 第一列内容 -->
    </div>
    <div class="col-md">
      <!-- 第二列内容 -->
    </div>
    <div class="col-md">
      <!-- 第三列内容 -->
    </div>
    <div class="col-xl">
      <!-- 第四列内容 -->
    </div>
  </div>
</div>

在上面的代码中,第一列、第二列和第三列使用col-md类指定在中等屏幕尺寸下的宽度,而第四列使用col-xl类指定在超大屏幕尺寸下的宽度。这样,即使第四列的内容很长,也不会压下其他列。

推荐的腾讯云相关产品:腾讯云服务器(CVM)和腾讯云云服务器负载均衡(CLB)。

请注意,以上答案仅供参考,具体的解决方案可能因实际需求和环境而有所不同。

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

相关·内容

响应式布局

框架,用于开发响应式布局、移动设备优先 WEB 项目。...使用步骤 下载 Bootstrap 把会用到文件夹放到要用站点文件夹下 另外,要防止低版本 ie 没办法用 h5、css3 新东西,导致出问题,html 骨架需要加点料。...(viewport)容器 适合于单独做移动端开发 栅格系统 栅格系统是将页面布局划分为等宽,然后通过定义来模块化页面布局。...Bootstrap 提供了一套响应式、移动设备优先流动栅格系统,会把 container 分为 12 。 栅格系统通过一系列行(row)和(column)组合来创建页面布局。.../div> 偏移 使用类前缀-offset-*类可以将向右侧偏移,这些类实际是通过*选择器为当前元素增加了左边距

2.9K10

bootstrap快速入门笔记(二)-栅格系统,响应式类

(column)”在水平方向创建一组col,只有能作为行直接子元素.row .col-xs-4   通过设置padding属性,通过为.row 元素设置负值 margin 从而抵消掉为 .container.../* 超小屏幕(手机,小于 768px) */ /* 没有任何媒体查询相关代码,因为这在 Bootstrap 中是默认(还记得 Bootstrap移动设备优先吗?)...@media (min-width: @screen-md-min) { ... } /* 大屏幕(大桌面显示器,大于等于 1200px) */ @media (min-width: @screen-lg-min...: @screen-lg-min) { ... } 三,栅格参数 通过下表可以详细查看 Bootstrap 栅格系统是如何在多种屏幕设备上工作。...为了克服这一问题,建议联合使用 .clearfix和响应式工具类 *如果在一个 .row 内包含(column)大于12个,包含多余(column)元素将作为一个整体单元被另起一行排列。

1.1K30

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

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

4K20

BootStrap应用开发学习入门

特点: 简单容易上手,开源产品,提高开发人员工作效率 移动设备优先:自 Bootstrap 3 起,框架包含了贯穿于整个库移动设备优先样式。...该内边距是通过 .rows 外边距(margin)取负,表示第一和最后一行偏移。 网格系统是通过指定您想要横跨十二个可用来创建。...... } /* 大型设备(大台式电脑,1200px 起) */ @media (min-width: @screen-lg-min) { ... } Bootstrap 网格系统如何跨多个设备工作...偏移 描述:偏移是一个用于更专业布局有用功能, 可用来给腾出更多空间; 为了在大屏幕显示器使用偏移,请使用 .col-md-offset-*类,其中 * 范围是从 1 到 11。...; 比如:row 分为 3 和 9 ,我们可以在9中进行分 4 个 col-md-6 则,相对于在 9中再次等分为2行12;(具体查看下面的案例) 排序 描述:以一种顺序编写,然后以另一种顺序显示

17.4K20

BootStrap应用开发学习入门

特点: 简单容易上手,开源产品,提高开发人员工作效率 移动设备优先:自 Bootstrap 3 起,框架包含了贯穿于整个库移动设备优先样式。...该内边距是通过 .rows 外边距(margin)取负,表示第一和最后一行偏移。 网格系统是通过指定您想要横跨十二个可用来创建。...... } /* 大型设备(大台式电脑,1200px 起) */ @media (min-width: @screen-lg-min) { ... } Bootstrap 网格系统如何跨多个设备工作...偏移 描述:偏移是一个用于更专业布局有用功能, 可用来给腾出更多空间; 为了在大屏幕显示器使用偏移,请使用 .col-md-offset-*类,其中 * 范围是从 1 到 11。...; 比如:row 分为 3 和 9 ,我们可以在9中进行分 4 个 col-md-6 则,相对于在 9中再次等分为2行12;(具体查看下面的案例) 排序 描述:以一种顺序编写,然后以另一种顺序显示

14.5K30

移动开发之响应布局

移动开发之响应布局 1.响应式开发 1.1 响应式开发原理 就是使用媒体查询针对不同宽度设备进行布局和样式设置,从而适配不同设备目的。...=1200px):宽度设置为1170px 2.container-fluid类 流式布局容器 百分百宽度 占据全部视口(ciewport)容器 适合于单独做移动开发 3.Bootstrap...Bootstrap提供了一套响应式,移动设备优先流式栅格系统,随着屏幕或视口(viewport)尺寸增加,系统会自动分为最多十二 Bootstrap里面container宽度是固定,但是不同屏幕下...div class="col-sm-6">小 3.4 偏移 使用.col-md-offset-类可以将向右侧偏移。...响应式工具 为了加快对移动设备友好页面开发工作,利用媒体查询功能,并使用这些工具类可以方便针对不同设备展示或隐藏页面内容。

2.2K20

Bootstrap学习文档(一)

Bootstrap 是什么 Bootstrap 是最受欢迎 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先 WEB 项目,使用这个框架可以简单高效开发出适配各种屏幕网站应用,...Bootstrap 相比其他框架,自由度更高,它提供了基本样式和基本组件,而不会在创造约束开发者思维。...Bootstrapjs插件,不需要我们写 js 代码就能帮我们实现要用 js 来实现效果,而是通过使用 Bootstrap 自定义属性。...: red;">错误写法 Bootstrap 栅格系统 在 Bootstrap 中一行分为 12,也即是屏幕宽度被分为了 12份,一份就是十二分之一屏幕宽度,源码是通过宽度为百分比以及浮动实现...偏移 col--offset- 向右偏移,第一个 * 是和屏幕尺寸有关,第二个 * 是偏移数,如果偏移数量大于12则会不起作用。

2.8K20

CSS布局那点事儿

布局 最开始老一代网站开发,布局都是通过表格实现。 这样可以形成规整网格布局,但是也会带来一定复杂性。比如想要新增某个页面元素,就有可能要改动整个表格,添加很多无用行或者。...后来,衍生出不少CSS框架,他们屏蔽了底层css语法,只需要按照特定使用方式就能实现网格布局。...总的来说,还是利大于弊吧,不然bootstrap等等也不会现在火成这样。 CSS布局 网上有很多关于布局文章,什么双飞翼啊等等。 这里先从最原始来介绍。...一个部分向左浮动,一个部分向右浮动。为什么这样呢? 这是因为如果全部采用向左浮动,如果主体部分由文本换行等,由于像素偏差可能导致最右边文本框挤出屏幕,导致无法阅读。...某一个部分再分成两部分,通过向左向右浮动方式显示。 巧用min-width和max-width min-width和max-width其实是很长用

82050

CSS:使用CSS媒体查询创建响应式布局

现如今在Web前端领域,BootStrap是一个最流行UI库,其12栅栏系统为响应式布局提供了一种对程序员来说很好操作模式。   ...”是应用媒体查询媒体类型,例如“all”,意思是所有媒体都使用接下来css样式表;或者“(min-width:800px)”,意思是屏幕最小宽度为800px时使用接下来CSS样式表,如果屏幕宽度大于...media (min-width:800px) and (max-width:1200px) { ... } /*可以使用多个and运算符,这里添加了第三个判断方向为纵向*/ @media (min-width...:800px) or (orientation:portrait) { ... } /*宽度不是800px时激活*/ @media (not min-width:800px) { ... }   4、宽度和高度非常相似...(orientation: portrait) { ... }   您可能已经注意到了,iPad 使用是 orientation 媒体特性,而 width 用于 Apple iPhone 之上。

2.9K20

移动开发-响应式

以上来自2020年数据 Bootstrap 使用: 控制权在框架本身,使用者要按照框架所规定某种规范进行开发 <!...Bootstrap提供了一套响应式、移动设备优先流式栅格系统,随着屏幕或视口 (viewport) 尺寸增加,系统会自动分为最多12 栅格选项参数: 超小屏幕 (手机) < 768px 小屏设备...15像素 padding 可同时为一指定多个设备类名,以便划分不同份数 例如 class= col-md-4 col-sm-6 嵌套: 内置栅格系统将内容再次嵌套,就是一个内再分若干份小,...类可以将向右侧偏移,这些类实际是通过使用 * 选择器为当前元素增加了左侧边距 (margin) 1 2 排序: 通过使用 .col-md-push 和 .col-md-pull 类就可以改变

2.4K20

Bootstrap快速入门

其具有以下特性:完整基础CSS插件;丰富预定义样式表;基于jQueryjs插件集;非常灵活响应式栅格系统,而且崇尚移动先行思想。...使用行在水平方向上创建一组 具体内容放在中,只有可以作为行直接子元素 接下来看一下.container样式源码,可以看出其核心就是.container和@media设置 .container...:768px) { .container { width: 750px; } } 栅系统用法,其实就是组合,主要涉及4个特性:组合、偏移、嵌套、排序,首先介绍组合例子...-4">.col-md-4 .col-md-offset-4 同样,栅格系统支持嵌套,即在中再声明多个行,内部嵌套row宽度为100%时,就是当前外部宽度。...系统为了方便,统一在左浮动基础,通过设置left和right值来实现定位显示。

4.1K61

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

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

3.4K31

CSS 基础系列:常见布局方式

自适应布局是指一由内容撑开,另一撑满剩余宽度布局方式。...有三种常用方式可以达到两自适应布局 float + BFC: 左元素在没有固定宽度情况下设置浮动,因此宽度由内容撑开;右元素激活 BFC(这里采用 overflow:hidden)后,可以防止浮动元素盖住...此时布局是这样: image.png 这里要注意点:所有浮动元素可以看作位于同一个浮动流,利用负边距可以让某个元素在这个流中移动,并且会叠加到相应元素上面。...4.2 利用背景图片: 这种方法是我们实现等高最早使用一种方法,就是使用背景图片,在父元素使用这个背景图进行Y轴铺放,从而实现一种等高假象。...: 这种方法是使用边框和绝对定位来实现一个假高度相等效果。

1.7K20
领券