Loading [MathJax]/jax/output/CommonHTML/config.js

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

社区首页 >问答首页 >使用3个断点设置媒体查询

问使用3个断点设置媒体查询
EN

Stack Overflow用户

提问于 2019-01-23 12:36:44

回答 1查看 187关注 0票数 0

我正在使用Bootstrap的响应式网站。根据业务需要，我只需要保持3个流畅的布局断点。如下所示：

1024px and above = 4 column
768px - 1024 px = 2 column
below 768px = 1 column

目前，我的html是：

div.col-lg-3 {
  border: 1px solid black;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">1</div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">2</div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">3</div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">4</div>
  </div>
</div>

但是如何设置来修复我的业务需求呢？有谁能帮我吗？

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-01-23 13:39:06

如果您不想修改bootstrap源代码，您可以使用适当的媒体查询为这些断点创建自己的自定义列类。

.col-custom {
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;
}

@media(min-width: 768px) {
  .col-custom {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
}

@media(min-width: 1024px){
  .col-custom{
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row">
    <div class="col-custom">1</div>
    <div class="col-custom">2</div>
    <div class="col-custom">3</div>
    <div class="col-custom">4</div>
  </div>
</div>

票数 0

EN

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/54327454

复制

相关文章

Google AI的ALBERT在多个NLP性能基准测试中名列前茅

深度学习神经网络人工智能 pytorch 腾讯云测试服务

谷歌人工智能（Google Ai）和芝加哥丰田技术研究所（Toyota technology institute of Chicago）的研究人员创建了一种人工智能模型ALBERT，它在主要的NLP性能排行榜上，GLUE和SQuAD 2.0等基准测试以及高RACE性能得分方面，均名列第一。

AiTechYun

2019/10/10

9170

Google AI的ALBERT在多个NLP性能基准测试中名列前茅

JDBC 在性能测试中的应用

jdbc 数据库 sql 云数据库 SQL Server java

JDBC（Java DataBase Connectivity，Java 数据库连接）是一种用于执行 SQL 语句的 Java API，可以为多种关系数据库提供统一访问，它由一组用 Java 语言编写的类和接口组成。JDBC 提供了一种基准，据此可以构建更高级的工具和接口，使数据库开发人员能够编写数据库应用程序。

程序猿川子

2022/07/01

1.1K0

聊聊流计算系统中的核心问题：状态管理

云计算 unix 缓存数据库 sql

状态管理是流计算系统的核心问题之一。在实现流数据的关联操作时，流计算系统需要先将窗口内的数据临时保存起来，然后在窗口结束时，再对窗口内的数据做关联计算。在实现时间维度聚合特征计算和关联图谱特征计算时，更是需要创建大量的寄存用于记录聚合的结果。而CEP的实现，本身就与常说的有限状态机（Finite-state machine，FSM）是密切相关的。不管是为了关联计算而临时保存的数据，还是为了保存聚合计算的数据，抑或是CEP里的有限状态机，这些数据都是流计算应用开始运行之后才创建和积累起来。如果没有做持久化操作，这些数据在流计算应用重启后会被完全清空。正因为如此，我们将这些数据称之为流计算应用的“状态”。从各种开源流计算框架的发展历史来看，大家对实时流计算中的“状态”问题也是一点点逐步弄清楚的。

大数据流动

2020/05/08

1.3K0

Dapr在Java中的实践之状态管理

http 数据库云数据库 SQL Server sql SSL 证书

状态管理（State Management）使用键值对作为存储机制，可以轻松的使长时运行、高可用的有状态服务和无状态服务共同运行在我们的服务中。

万猫学社

2022/12/01

8840

Dapr在Java中的实践之状态管理

Spring中，多个service发生嵌套，事务是怎么样的？

最近在项目中发现了一则报错：“org.springframework.transaction.UnexpectedRollbackException: Transaction rolled back because it has been marked as rollback-only”。根据报错信息来看是spring框架中的事务管理报错：事务回滚了，因为它被标记为回滚状态。

小忽悠

2019/12/03

9.8K0

Spring中，多个service发生嵌套，事务是怎么样的？

最近在项目中发现了一则报错：“org.springframework.transaction.UnexpectedRollbackException: Transaction rolled back because it has been marked as rollback-only”。根据报错信息来看是spring框架中的事务管理报错：事务回滚了，因为它被标记为回滚状态。

小忽悠

2019/12/02

1K0

Spring中，多个service发生嵌套，事务是怎么样的？

【说站】java中reduce在流的使用

reduce意味着减少。通过参与的Function，我们可以将list归类为一个值。其返回类型为Optional类型。

很酷的站长

2022/11/23

1.4K0

【说站】java中reduce在流的使用

Spring中的事务

SQL 标准定义的四个隔离级别为： Read Uncommitted （未提交读）、 Read Committed （提交读）、 Repeatable Read （可重复读）、 Serializable （可串行化），下面分别介绍。

Swingz

2020/12/18

4300

（五）在组件中访问状态

一、在组件中访问状态 store.js import { ref, computed } from 'vue' import { defineStore } from 'pinia' export const useNoteStore = defineStore('note', () => { const noteList = ref([ { // ... } ]) return { noteList

老怪兽

2023/02/22

1.7K0

在同一word文档中设置不同页码

(opens new window) 1、把文档结构确定好，比如封面、目录和正文，然后在每一部分与每一部分之间插入分隔符，具体操作为：点击“页面布局”-“分隔符”-“下一节”。注意要把光标放在两部分即封面与目录之间哦。 2、点击“插入”-"页码"-“页面底端”，选择自己需要的页码样式。 3、取消分节链接。word默认的节是链接到前一节的（即与前一节有相同的页面格式），因此要将节与节之间的链接取消掉。点击页码，点击“取消链接到前一条页眉” 4、封面部分不要页码，直接选中页码手动删除即可，操作如下图所示。因为封面部分已经独立为一节，所以不会受其他部分影响。 5、点击“页码”-“设置页码格式“，会出现如下对话框。在编号格式里选择罗马数字，在页码编号里选择起始页码，填I，点确定。 6、正文部分按照相同的方法设置成阿拉伯数字页码。这样整篇文章的页码就弄好了哦。

P轴

2022/11/18

2K0

在流中实现readline算法

html json node.js 网站

流就是流动的数据，一切数据传输都是流，无论在平台内部还是平台之间。但有时候我们需要将一个整体数据拆分成若干小块（chunk），在流动的时候对每一小块进行处理，就需要使用流api了。

Jean

2019/12/04

2K0

在流中实现readline算法

stream是数据集合，与数组、字符串差不多。但stream不一次性访问全部数据，而是一部分一部分发送/接收（chunk式的），所以不必占用那么大块内存，尤其适用于处理大量（外部）数据的场景

ayqy贾杰

2019/06/12

2.3K1

java中jbpm工作流_状态机和工作流的区别

BPM，全称是Java Business Process Management（业务流程管理），它是覆盖了业务流程管理、工作流、服务协作等领域的一个开源的、灵活的、易扩展的可执行流程语言框架。jBPM是公开源代码项目，使用它要遵循 ASL(Apache License Version 2.0)和EULA(JBoss End User License Agreement)协议。

全栈程序员站长

2022/09/30

1.4K0

java中jbpm工作流_状态机和工作流的区别

IDEA在同一工作空间，显示多个项目

maven 编程算法

IDEA 的工作空间，默认一个项目，多模块。如何在同一个工作空间，同时显示多个项目呢？

JavaEdge

2023/03/02

3.7K0

IDEA在同一工作空间，显示多个项目

在一个.net sln中包含多个project,project引用同一个dll导致的错误

在一个.net sln中包含多个project，其中四个project应用了同一个.net assamply：Lucene.Net。这四个project其中一个编译异常： ForumsDataSou

张善友

2018/01/19

1.8K0

在Oracle中，如何定时清理INACTIVE状态的会话？

数据库 sql oracle

今天小麦苗给大家分享的是在Oracle中，如何定时清理INACTIVE状态的会话？

AiDBA宝典

2019/09/29

2.7K0

CREATE2 在广义状态通道中的使用

https 网络安全游戏云推荐引擎

君士坦丁堡硬升级中引入了一个新操作码 CREATE2[1] ，它使用新的方式来计算常见的合约地址，让生成的合约地址更具有可控性，通过 CREATE2 可以延伸出很多新的玩法，这篇文章来探讨下，在广义状态通道中的妙用。

Tiny熊

2019/10/25

1.4K0

Redis中的事务介绍

linux 云数据库 Redis®数据库云数据库 SQL Server sql

MySQL中的事务大家都不陌生，Redis中的事务和MySQL中的事务不同，今天看下Redis事务中的一些知识点吧。

AsiaYe

2020/07/09

3580

Java8中的流操作-基本使用&性能测试

api java mapreduce jvm

流是 Java8 中 API 的新成员，它允许你以声明式的方式处理数据集合（通过查询语句来表达，而不是临时编写一个实现）。这有点儿像是我们操作数据库一样，例如我想要查询出热量较低的菜品名字我就可以像下面这样：

我没有三颗心脏

2019/08/06

1K0

Java8中的流操作-基本使用&性能测试

点击加载更多

相似问题

关于MPI通信拆分

13

MPI :等级1的通信错误:连接被拒绝

13

MPI通信器管理

13

MPI通信器错误

11

在Rmpi中获取MPI通信器句柄

11

添加站长进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例