开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何使用bootstrap在屏幕尺寸超过1280的情况下浮动右边的卡体？

在屏幕尺寸超过1280的情况下，使用Bootstrap可以通过以下步骤来浮动右边的卡体：

首先，确保你已经引入了Bootstrap的CSS和JavaScript文件到你的HTML页面中。
在HTML页面中，创建一个包含卡体的容器元素，可以使用Bootstrap提供的<div>标签来创建一个容器。
在容器中，创建两个子元素，一个用于左侧内容，一个用于右侧卡体。可以使用Bootstrap的网格系统来实现这一布局。例如，可以使用col-md-8类来定义左侧内容占据的列数，使用col-md-4类来定义右侧卡体占据的列数。
在右侧卡体的子元素中，添加一个自定义的CSS类，用于设置浮动效果。可以使用Bootstrap提供的float-right类来实现右浮动。
最后，根据需要，可以使用Bootstrap提供的其他类来进一步调整样式和布局，例如margin和padding类来设置边距。

以下是一个示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Floating Card Example</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-md-8">
        <!-- 左侧内容 -->
        <h2>左侧内容</h2>
        <p>这里是左侧内容的描述。</p>
      </div>
      <div class="col-md-4 float-right">
        <!-- 右侧卡体 -->
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">右侧卡体</h5>
            <p class="card-text">这里是右侧卡体的内容。</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

在这个示例中，左侧内容占据了8个列，右侧卡体占据了4个列，并且使用了float-right类来实现右浮动效果。你可以根据实际需求进行调整和修改。

请注意，以上示例中的链接地址是腾讯云相关产品和产品介绍的示例，仅供参考。你可以根据实际情况替换为适合你的产品和链接地址。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

像素密度计算

大家好，又见面了，我是你们的朋友全栈君。为解决Android设备碎片化，引入一个概念density，也就是密度.它指的是在一定尺寸的物理屏幕上显示像素的数量,一般使用dpi(dots per inch,每英寸像素数)作为单位. 比如设备分辨率为240×320,屏幕物理尺寸为1.5英寸x2英寸(对角线为2.5), 它的密度可以用分辨率/尺寸表示:240/1.5或者即320/2，密度为160dpi。算对角线也是一样的, 长的平方+宽的平方=160000,开方后=400.可知400/2.5=160.

01

CSS中的float定位技术在iOS上的实现

几乎所有会WEB前端开发的同学都知道CSS中有一个float属性用于实现HTML元素的浮动定位展示。float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围。不过在 CSS 中，任何元素都可以浮动，假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。浮动布局主要用于那些图文环绕以及实现一些界面不规则排列的场景，并且浮动定位技术在WEB前端开发中应用的非常普遍。

02

iOS的MyLayout布局体系--浮动布局MyFloatLayout

在MyLayout的6大布局中，每种布局都有不同的应用场景。且每种布局的子视图的约束机制不一样：线性布局MyLinearLayout、表格布局MyTableLayout、流式布局MyFlowLayout、浮动布局MyFloatLayout这四种布局的子视图之间的约束是通过添加到父布局的先后顺序来决定的；框架布局MyFrameLayout中的子视图则只跟父布局视图有关，而跟添加的先后顺序无关；相对布局中MyRelativeLayout的子视图则是通过设置视图之间的依赖关系来建立约束的，而跟添加的先后顺序无关。即便如此，同一种界面功能在一些情况下都可以用任何一种布局来实现。在这些布局中相对布局因为是通过设定视图之间的依赖来建立一种布局约束，因此我们可以用他来构造一些复杂且无规律的界面布局，但其缺点则是太过于依赖约束，导致当界面调整时需要重新设定视图之间的依赖关系(iOS的AutoLayout其实就是一种相对布局的实现，布局时需要设置太多的约束，这也是我一直诟病AutoLayout的原因)。那么是否可以有一种方法不设置视图之间的依赖而来实现一些复杂的界面布局呢？这也就是我们推出浮动布局MyFloatLayout的原因。

03

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

在前端开发领域，Bootstrap无疑是最受欢迎的HTML、CSS和JS框架之一，它以其强大的组件库和响应式设计能力著称。响应式设计允许网页在不同设备和屏幕尺寸上都能提供优秀的用户体验。本文将深入探讨Bootstrap的响应式设计原理，常见问题，易错点以及如何避免它们，附带代码示例，帮助你更好地掌握Bootstrap的响应式特性。

01

【Android 应用开发】Android屏幕适配解析 - 详解像素,设备独立像素,归一化密度,精确密度及各种资源对应的尺寸密度分辨率适配问题

转载请注明出处 : http://blog.csdn.net/shulianghan/article/details/19698511

02

Android UI设计常用尺寸及基本知识

指实际的物理尺寸，为屏幕对角线的测量。为了简单起见，Android把实际屏幕尺寸分为四个广义的大小：小，正常，大，特大。

03

Bootstrap学习文档（一）

Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目，使用这个框架可以简单高效的开发出适配各种屏幕的网站应用，即是编写一套代码，适用多重平台（PC，平板，手机等）。Bootstrap 相比其他框架，自由度更高，它提供了基本的样式和基本的组件，而不会在创造上约束开发者的思维。

02

iOS下的界面布局利器-MyLayout布局框架

MyLayout是一套iOS界面视图布局框架。其内核是基于对UIView的layoutSubviews方法的重载以及对子视图的bounds和center属性的设置而实现的。MyLayout功能强大而且简单易用，它集成了iOS Autolayout和Size Classes、android的5大布局体系、HTML/CSS的浮动定位技术以及flex-box和bootstrap框架等市面上主流的平台的界面布局功能，同时提供了一套非常简单和完备的多屏幕尺寸适配的解决方案。MyLayout还提供了Swift版本TangramKit

03

img标签不同设备加载不同尺寸的图片的几种方法

一般来说，桌面端显示的是大尺寸的图像，文件体积较大。手机的屏幕较小，只需要小尺寸的图像，可以节省带宽，加速网页渲染。

01

【软件开发规范七】《Android UI设计规范》

Android 定义颜色color时有6位或8位值的区别，6位（如：#0470C4）就是RGB，值8位（如：#1E000000）头两位是透明度，后6位是RGB值，00是完全透明，FF是完全不透明，比较适中的透明度值是 1E。

02

OpenGL ES 投影和坐标[转]

http://blog.csdn.net/liyuanjinglyj/article/details/46624901

03

Android TV开发总结【适配】

Android 的屏幕适配是指适配不同机顶盒 UI 框架层输出的分辨率和 dpi，而不是适配不同分辨率的电视机（电视机的适配交由机顶盒本身完成，和各个应用无关）

01

为 DP 设计布局

什么是屏幕尺寸、屏幕分辨率、屏幕像素密度？什么是dp、dip、dpi、sp、px？他们之间的关系是什么？什么是mdpi、hdpi、xdpi、xxdpi？如何计算和区分？题图中的每一个矩形都代表着一种Android设备。Android系统碎片化问题的严重性，让我们不得不面对屏幕适配的问题。屏幕尺寸：屏幕尺寸指屏幕的对角线的长度，单位是英寸，1英寸=2.54厘米。比如常见的屏幕尺寸有2.4、2.8、3.5、3.7、4.2、5.0、5.5、6.0等。屏幕分辨率：屏幕分辨率是指在横纵向上的像

05

【JQuery】扩展BootStrap入门——知识点讲解(二)

BootStrap 必须需要至少一个布局容器，才能为页面内容进行封装和方便的样式控制。

02

iOS界面布局的核心以及TangramKit介绍

TangramKit是iOS系统下用Swift编写的第三方界面布局框架。他集成了iOS的AutoLayout和SizeClass以及Android的五大容器布局体系以及HTML/CSS中的float和flex-box的布局功能和思想，目的是为iOS开发人员提供一套功能强大、多屏幕灵活适配、简单易用的UI布局解决方案。Tangram的中文即七巧板的意思，取名的寓意表明这个布局库可以非常灵巧和简单的解决各种复杂界面布局问题。他的同胞框架：MyLayout是一套用objective-C实现的界面布局框架。二者的主体思想相同，实现原理则是通过扩展UIView的属性，以及重载layoutSubviews方法来完成界面布局，只不过在一些语法和属性设置上略有一些差异。可以这么说TangramKit是MyLayout布局库的一个升级版本。大家可以通过访问下面的github站点去下载最新的版本：

03

Bootstrap行和列

在Bootstrap中，行（Row）和列（Column）是构建响应式网格布局的核心组件。它们允许我们创建灵活的网格系统，以便在不同的屏幕尺寸下进行布局。

03

网页布局的几种方式有哪些_做网页建议用哪种布局

这种布局具有很强的稳定性与可控性，也没有兼容性问题，但不能根据用户的屏幕尺寸做出不同的表现。即如果用户的屏幕分辨率小于这个宽度就会出现滚动条，如果大于这个宽度则会留下空白。

02

Bootstrap列排序

在Bootstrap中，列排序（Column Ordering）是一种布局技术，允许我们在不同屏幕尺寸下重新排列列的顺序。这对于在响应式设计中调整布局非常有用。

03

理想的viewport(视口)并不存在

在你依据少数几个严格的断点（breakpoints）来做设计决策之前，确保你已经考虑了屏幕尺寸和浏览器视口的巨大碎片化问题。

03

Android全面的屏幕适配方案解析(二)

上一篇把屏幕适配相关的概念梳理了一下，主要也是为了能更好的理解后面内容，那从这篇开始就要讲解适配方案啦，没看第一篇的可以先看这篇：Android全面的屏幕适配方案解析(一)

03

移动应用界面设计的尺寸规范「建议收藏」

移动应用的界面设计画布尺寸设计多大（特别是Android）、图标和字体大小怎么定、需要设计多套设计稿么、如何切图以配合开发的实现？本篇将结合iOS和android官方的设计规范、搜集的资料以及工作中的摸索，来分享移动应用界面设计中的尺寸规范等问题，希望能给移动端的新手设计师些许指引。若有不当之处，欢迎斧正。

02

Android全面的屏幕适配方案解析(一)

自Android系统发布以来，似乎一直绕不开屏幕适配这个话题。毫无疑问，Android系统能发展到今天，离不开其开放性，而随着国内手机厂商的崛起，任何用户、开发者、OEM厂商、运营商都可以对Android进行定制，于是导致长期以来一直诟病的碎片化严重的问题。

03

Android入门学习笔记（3）像素换算dp

分辨率就是手机屏幕的像素点数。一般为屏幕的“宽×高”，例如分辨率有720×1280的手机设备，表示此屏幕在宽度方向有720个像素点，在高度方向有1280个像素点。

00

前端移动web-day05学习笔记

在某个查询区间，将栅格隐藏，可以用隐藏的样式，这个样式包括四个： 1、.hidden-xs 在屏幕小于768时将栅格隐藏 2、.hidden-sm 在屏幕大于等于768小于992时将栅格隐藏 3、.hidden-md 在屏幕大于等于992小于1200时将栅格隐藏 4、.hidden-lg 在屏幕大于等于1200时将栅格隐藏

02

Bootstrap响应式工具

Bootstrap使用一系列响应式断点来定义不同屏幕尺寸的布局变化。开发者可以利用这些断点在不同的设备上进行布局调整。

04

【Android 应用开发】分析各种Android设备屏幕分辨率与适配 - 使用大量真实安卓设备采集真实数据统计

转载请注明出处 : http://blog.csdn.net/shulianghan/article/details/19899193.

03

设备尺寸杂谈:响应性Web设计中的尺寸问题

目前在为移动设备设计界面时，最头疼的问题莫过于尺寸的问题。我们无法使用固定的尺寸来进行设计，因为不同设备的大小千变万化。但是如果我们了解了设备的物理特性后，这将有助于我们进行更好的设计。

02

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

在网页开发中，创建响应式的布局是至关重要的，因为不同设备和屏幕尺寸需要不同的布局来呈现内容。Bootstrap 提供了一个强大的栅格系统，使开发者能够轻松创建适应不同屏幕的网页布局。本文将深入介绍 Bootstrap 栅格系统，面向初学者，帮助您充分了解如何使用它来构建响应式网页。

02

创建支持多种屏幕尺寸的Android应用

Android涉及各种各样的支持不同屏幕尺寸和密度的设备。对于应用程序，Android系统通过设备和句柄提供了统一的开发环境，大部分工作是校正每一个应用程序的用户界面到它显示的屏上。与此同时，系统提供APIs允许你控制应用界面为特定的屏幕尺寸和密度，为不同屏幕的配置提供最优化的用户界面设计。例如，你可能会要一个平板电脑的用户界面，这不同于手机的用户界面。虽然系统能缩放，调整其尺寸，以使应用软件工作在不同屏上，但是应该尽量优化应用软件适应不同的屏幕尺寸和密度。为此，对所有设备的用户体验应最大化且应让用户们相

06

为什么要用 picture 标签代替 img 标签？

本文最初发布于 Medium 网站，经原作者授权由 InfoQ 中文站翻译并分享。

02

【移动端网页布局】流式布局 ① ( 流式布局简介 | 百分比布局 / 非固定像素布局 | 根据屏幕尺寸 / 设备类型自动调整网页布局 )

为流式布局中盒子模型设置百分比宽度 , 其大小可以根据屏幕宽度自适应伸缩 , 该盒子没有像素限制 , 内容自动向左右两边填充 ;

03

流式布局解决方案

在真实项目中设计师给我们一般是：640960 6401136 750*1334 响应式布局的解决方案： 1>流式布局法容器或者是盒子一般都不写固定值，而是使用百分比（相对于视口区域的百分比）其余的样式：字体、高度、margin、padding等都按照设计稿上标注尺寸的一半来设置对于有些屏幕尺寸下，我们设置的固定值看起来不是特别的好看，需要用@media微调特殊情况是设计稿是640px，在iphone6 6p会虚化,我们需要的图片是1280

02

Carson带你学Android：最全面、最易懂的屏幕适配解决方案

给你带来一种全新、全面而逻辑清晰的Android屏幕适配思路，只要你认真阅读，保证你能解决Android的屏幕适配问题！

01

Bootstrap列偏移

在Bootstrap中，列偏移（Column Offset）是一种布局技术，允许我们在网格布局中创建空白列来实现对齐和布局的调整。通过偏移列，我们可以在不修改列宽度的情况下，将列向右移动一定数量的网格列。

04

CSS常见布局

前言在前端开发中，无论是过去，现在，甚至将来，页面布局一直是极为重要的一环，良好的布局方案往往能给用户带来舒适的体验。这篇文章便介绍一些常见的布局方式及其实现。一：两栏布局两栏布局常见于那些一

02

【Web技术】522- 设计体系的响应式设计

在蚂蚁内部有着数量繁多且复杂的中后台业务系统，Ant Design 一直以来致力于从设计策略和资产的角度解决这些产品的体验一致性问题，随着蚂蚁产品生态的多端化进程，越来越多的跨设备和不同屏幕尺寸导致的问题也逐渐暴露，例如：

02

Bootstrap栅格布局

Bootstrap栅格布局是一种响应式网格系统，用于构建灵活的网页布局。它基于12个网格列的概念，可以将网页内容分成多个部分，并通过在不同屏幕尺寸下设置列的宽度、偏移和排序，来适应不同的设备和布局需求。

03

Android技能树 — 屏幕适配小结

关于屏幕适配，几乎每隔一段时间就会看见有人发出来说XXX方案，实现超级简单的适配方式等等。所以我把我目前了解过的常用的适配方案做个总结，并简单说说原理，从而让大家也初步了解各个方案的实现。（其实很多人都是看见别人写的适配方案，虽然可能实际在使用了，但是却从来没有去了解过这个方案的原理,而且遇到一些简单的坑的时候，因为不知道原理，也无法自己解决。）

03

Android适配全面总结（一）----屏幕适配

版权声明：本文为博主原创文章(部分引用他人博文，已加上引用说明)，未经博主允许不得转载。https://www.jianshu.com/p/7aa34434ad4d

04

bootstrap容器

Bootstrap是一个流行的前端开发框架，提供了丰富的CSS和JavaScript组件，用于构建响应式和现代化的Web应用程序。其中，容器（Container）是Bootstrap中的一个重要组件，用于创建响应式布局和页面内容的容器。

03

调整屏幕的宽高比

我们将上一篇文章中写的应用程序再次运行起来，然后将屏幕横过来，我们会发现空气曲棍球的桌子被压扁了。这之所以会发生，是因为我们没有考虑屏幕的宽高比，直接将坐标传递给了OpenGL。在这片文章中，我们会弄清楚为什么桌子被压扁了，以及如何使用投影解决这个问题。

01

开源UI界面布局框架MyLayout1.9发布

MyLayout是一套功能全面的iOS开源UI界面布局框架。它囊括了前端所有流行的界面布局技术和解决方案，同时具有如下七大特点：

01

Android 手表应用开发设计规范【译】

阅读提示：全文较长，预计阅读时间20分钟 image.png Android 手表设计规范为可以穿戴的 Android 手表设计应用与为手机和平板设计应用有很大的区别：不同设备有着不同的优势及劣势、不同的应用场景及人体工学考量。想要开始设计，我们应该对 Android 手表体验有个整体的认识，并且知道应用怎样融入才能改善这种体验。　　一种新形式的设备应该对应一种全新的 UI 模式。概括地说，Android 手表 UI 主要由两大类型的模式组成:这两个部分是 “提示” (Suggest )和

07

像素终极作战指南

先科普，PIX+EL，Picture Element，赤果果的告诉了我们像素即是图像元素，是构成位图的最小单位，可以简单理解为图片所包含的“细节”数量。我们必须形成一个清晰的概念：像素是电子图片大小的唯一衡量标准。

02

Repo：UI设计字号完全指南，不知道用多少字号的设计师必看！

静电说：不少设计师对于UI设计中的字号大小很难把握，不知道如何设置，以达到最理想的搭配效果。今天咱们这篇文章就给大家来分享一下，这篇UI设计字体完全指南。

02

【知识普及】平板的屏幕分辨率和屏幕比例_和平精英平板分辨率

针对IOS，Android 手机分辨率大小、屏幕尺寸、开发尺寸的参考。在实际页面的开发过程，往往显示屏幕的宽度换算为像素尺寸的1/2。

02

简单谈谈我的Android屏幕适配之路

如果你还在受老板的“这个左移一个像素，再右移两个像素看看，不对不对移回来。这个大了。你没看见吗？这个变形了！”这样的气，那么学完这篇文章，你就可以回他“我已经适配了，你没看粗来吗？”

02

web移动端开发(7)上传码云+响应式布局_bootstrap框架

就是说我们不用再写一大堆的媒体查询了,直接把下载好的js文件引用就可以了,这个貌似已经过时了,所以就不多讲解.

01

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭